traintocode

Creating A Controlled Input

In order to read the value in the <input> you can make it a controlled component by passing the current value as a string, and listening to the onChange event of the input.

<input
  value={currentValue} // ...force the input's value to match the state variable...
  onChange={e => updateValue(e.target.value)} // ... and update the state variable 
/>

You can keep the value in another state variable of your App.tsx component.

Exercise

1. Create a string value to store the current value of the input box with useState()

2. Turn your <input> into a controlled component by passing value and onChange props.

You cannot do the coding exercises on this device, visit this page on a larger screen.

App.tsx

⋮