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.

3. Add a second boolean state variable called isBusy and disable your submit button when this is true (will be set in the next step)

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

App.tsx

⋮