React: Introduction to onChange event handling. And I am Farish Kashefinejad, the software development domain lead at Cloud Academy. If you have any questions or concerns about the content in this video, feel free to reach out to support@cloudacademy.com. To begin, I will do a quick overview. On the left is the Cloud Academy lab environment, and in that environment, I have a form component open. The component returns a simple form without a submit button, and that is intentional for demonstration purposes. The form only captures one input, the first name. On the right, I have the React development server running with the form being rendered. While coding for this video, you may see error messages on the right side where the React development server is.

This is due to autosave triggering as I write code, and I will be using the onChange event handler with this form. So, what is the onChange event handler? It's an event handler that triggers immediately when the value of the input is changed, as in with every keystroke. This is useful as you can store input information as it happens within state. Since I mentioned state, I will begin the code by destructuring useState from React. Now, inside of the form component, I will type const [ ] because whenever we set up state we use a destructured array, and the first argument of that array is the name of the state, which will be firstName, and the second argument will be the name of the method to set that state, which will be setFirstName, and this array will be equal to the useState method that I destructured above, and I will pass in a default value of a empty string. Now, whenever we work with a React event handler, we will usually use a handle function to execute whenever the event triggers. So, what I will do now is create the event handler function, const handleChange = [ ] == < and for now, I will leave it as a empty arrow function with no arguments.

Next, I need to attach the onChange event handler to a input. So, on the input below, I will add a new prop, onChange = (handleChange). So, when the onChange event triggers, it will execute the handleChange function. And what I will do next is the reason why I left the handleChange function incomplete. Going back to the handleChange function, just like with Vanilla JavaScript, whenever event triggers, there's a special event object that you can pass through as a argument. So, I will do the same right now with the handleClick function, and because this event object has been passed through, I now have access to the target of the event, and from the target which will be the input, I can access the input's value. And when that value changes, the onChange event will trigger. And I want to capture that information inside of state. So, inside of the handleChange function, I will set that state setFirstName and I will pass in the argument of the {event.target.value}.

Now, this part is complete. So, next, I will display the current value of the state on the web page. Below the form, I will add an h2 element, and use a JSX expression for the state. Inside of the h2 element, I will type {firstName}. This part is interesting. Let's see what happens as I type in the input form. I will begin by typing my name, and as you can see on the page, each character appears one at a time. And the reason why it's working like this is the onChange event triggers every time the input value changes, and every time the input value changes, the state changes. So, through that JSX expression, React will render that component giving it an appearance as though it's rendering each character one at a time. And that's it. Thanks for watching at Cloud Academy.