A controlled component is one where the form's data is handled by state. Here are the steps to create a controlled component.
Import the useState hook from the react library.
Create the state inside of the component that will handle the form data.
Set the value of the input to the state variable.
Update the state every time in changes.
import {useState} from "react";
function App() {
const [country, setCountry] = useState("");
return <select value={country} onChange={e => setCountry(e.target.value)}>
<option>Country</option>
<option value="france">France</option>
<option value="spain">Spain</option>
<option value="germany">Germany</option>
</select>
}
Top comments (2)
Great article, you got my follow, keep writing!
Thank you. I appreciate it.