Here’s how to create a basic form that takes in some user input and sends it off to a backend server. I’ve kept the sample up to date for React’s best practices in 2021, along with some comments to help you customize it for your needs.
import React, { useState, useEffect } from "react";import * as ReactDOM from 'react-dom'const axios = require('axios');const App = () => { // One state variable will hold the users input, and one for // the servers response const [input, setInput] = useState("placeholder input"); const [status, setStatus] = useState(""); const handleSubmit = (evt) => { evt.preventDefault(); axios.get('https://BACKENDAPI.URL?input='+input) .then(function (response) { if (response.data) { setStatus("Request sent successfully and server sent us a response at response.data"); } else { setStatus("Server didn't respond with anything"); } }) .catch(function (error) { if (error.response) { // request failed, most likely a 400-500 response setStatus(error.response.data); } else { setStatus("An error occured connecting to the server.") } }) } return ( <div> <h1>Sample Input Form</h1> <form onSubmit={handleSubmit}> <label> Please enter in a word: <input type="text" name="word" value={input} onChange={e => setInput(e.target.value)} aria-label="accessibility label" required aria-required="true" /> </label> <input type="submit" value="Submit"/> </form> // Where the response could go <div id="status"> {status} </div> </div> );}// boilerplate codeReactDOM.render( <div className="App"> <App /> </div>, document.getElementById('root'));
