|

A Simple React.js Form Example

A Simple Reactjs Form Example

The prior tutorial introduced us to creating components in React and using state and props with those components. So far, those components have been function based. Now we want to take a look at how to create components in React using the class syntax. In React you can accomplish the same types of things using either Stateful Functions, or using Class Components. Which approach you choose is up to you. Function components using hooks seems to be very popular currently, but we still want to know what the Class based React syntax is all about so let’s build a few components using that Class syntax.


Class Based React Components

The first thing we can do is to convert the App function component into a class one. You define a class with the same name and make it extend a special class in React, the React.Component class. By extending the React.Component you make your App JavaScript class an official React component. Just as with function components, class components also map data to view. For now however, this simple App component is enough. It is simply the placeholder for our application.


Creating A Form Component In React

In this application, we want to use a Form to capture some input data from a user. For example, we want the user to choose a company name and hit Go! At that point, the application will fetch the details of that company from the Github rest api so we can work with the data in react. So to start, here is a Form component in React using the class syntax.

To make that component render on to the page, we can simply add a reference to the Form component inside of the App component declaration.

react class syntax form component

In order to make it easier to visualize each component on the page, we add some simple css styling which adds an outline with some text.


Capturing The State Of The Text Input With onChange

We want to be able to use the data captured in the text input in the React application, but how do we do that? Well first, let’s add a state object to the Form component. We’ll set a property of companyName to ‘Microsoft’.

What this does is to render out the Form, with the text input populated with a value. We can try to type something in the text input, but you will not be able to. It is hard-coded at the moment. In fact, with React Dev Tools installed we can see a message which states “Warning: Failed prop type: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.
react state from form text input

So we can see how the value of state.companyName is populating the text form. We want this dynamic however. We want to be able to set the state by simply typing into the text input. How do we do that? With the onChange handler. The highlighted line below will set state.companyName any time a user types into the input field.


Taking Action With Captured Data With onSubmit

The state updates automatically now as the user types text into the text input. Now we want to take an action with that data once the user clicks on “Go!”. The way to do this is to set up a handler function, and then reference that function when the user clicks the button. So here is the code we will use for the handler function. We want to use the companyName value to make a get request to the Github rest api. We’ll use the axios library to make that happen.

In the code above we can now see that the form tab has a onSubmit attribute. That attribute is referencing the handleSubmit asynchronous function. We need to include the event.preventDefault() to prevent the html form from trying to submit itself. All we want to do is capture the typed in data and use it. Axios is used to make that request to the Github api. So if we typed ‘Microsoft’, then the request goes to https://api.github.com/users/Microsoft. You can see the data this produces if you plug that url into a browser.
github rest api response

That is the data we want to work with inside of React! Here is the slightly confusing part. Notice the this.props.onSubmit(resp.data); line of code. What we are saying here is that we want to take the data we got back from the api call, and pass it to the onSubmit() function. This function does not yet exist. In fact, if we type something in to the text field and click the button, we’ll get an error such as “Uncaught (in promise) TypeError: _this.props.onSubmit is not a function”. How do we fix this?


Passing Functions Via Props

Recall that a parent component can pass properties to child components via the props object. Those properties can be simple primitive values or function references. That means our App component can pass a function reference to the Form component and the Form component will be able to invoke that function because it will be part of its props object. Just so we can see this in action, we will now define a function called doSomething() in the App component. All we want it to do is log out the data that is passed to it. So notice the function definition, and also very important, the way in which we are passing it as a prop using <Form onSubmit={this.doSomething} />.

Now we can see that by clicking the button on the form, we are making a successful api request to Github, and logging out the data to the console. Pretty cool!


Further Reading


A Simple React.js Form Example Summary

In this tutorial we learned a few things about how to create a Form element in React, and how we can take action on the data we capture. To create a React class component, extend the React.Component class. In order to link the state of a form component to a form input, we can use the onChange handler. By passing a function via the props object, we can do something with the data we get back from an api request. Next up, we’ll see how to take that api response data and display it in the browser using additional components in React.