React JS - Creating Forms from the State
In this video, we will see how to create a React form using the state. Usually, react forms are created from the state since the latter can be loaded directly from the server (creating changing forms), and since creating an array for our inputs allows us to create a map and then use one handler for changing inputs.
This video deals with simple forms that consist of text fields. We will load different input fields with different labels, placeholders, and numbers of rows. In the upcoming videos we will tackle forms that contain text fields and drop down lists, and even more complex forms that contain numerous types of inputs.
By the end of this video we will submit the form using axios and then redirect to another page, the same concept applies for other libraries or for "manual" http requests.
I am using material UI for React in this video. The same concept applies if you are using other libraries, if you're using the stock input fields, or if you have created your own components. Some keywords might vary (e.g.: placeholder, label...) from one library to another, just be careful to check the keywords.
00:00 Creating first input from the state
10:33 Loading other from elements from the state
14:00 Handling input changes - updating the state with the content inside the fields
19:17 Adding the submit button
22:47 Creating the submit method - sending data to the backend and showing a loading spinner
You can find the source code on https://github.com/judabne/react-dyna... . This isn't a complete project, it just holds the code for loading my components from arrays ( • React JS - Loading Components Dynamically ... ), adding transitions ( • React JS - Adding Transitions to Pages and... ), and creating forms ( • React JS - Creating Forms from the State ).