From the course: React for Web Designers

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Bring form fields under control

Bring form fields under control - React.js Tutorial

From the course: React for Web Designers

Start my 1-month free trial Buy for my team

Bring form fields under control

“

- [Instructor] Now we need to start wiring up this post form so it can send updates to the API. We'll take this in two pieces. First, the form is currently uncontrolled, so we can type in it all we want, and React does not notice. We'll handle that in this video. The second part, we'll be taking action when the form is submitted. Over here in hotel.js, here is my post form component, and here are my form fields. So the first thing that I'm going to do is add a little bit of state to hold the values of those fields. So we'll have one called message text, which will have set message text to go with it, and these will come from React.usestate, and the initial value for message text will be an empty string. We'll call React.usestate again. This time it will be for the message type, that select box. Set message type and the initial value will be this default type that we saved earlier. Now we need to update our form fields. We'll start with the text area. This will need an on change…

Contents