Insert Message from React Controlled Input Component Value

The lecture goes over taking what the user typed and adding that to the list of messages.

The input element is turned into a React controlled component with the setting of value and onChange props.

The value of the input comes from a state variable. The useState hook can be used to tell React to track a certain value.

The onChange is a function definition with instructions to mutate the state for the new message that is typed into the text box.

Given an event object, you can access the input text using the value property of the target property.

Be careful about replacing existing React state whenever you call a set function from useState hook. In many cases, you might want to take the existing value and append to it, instead of replacing everything.