Werken met textarea in React

Laten we nu leren werken met een invoerveld met meerdere regels textarea. In React is de werking ervan, voor het gemak, vergelijkbaar gemaakt met de werking van een tekstinvoerveld. In tegenstelling tot pure JS, heeft in React een textarea geen sluitende tag nodig, en moet de tekst ervan geplaatst worden in het attribuut value.

Zie het voorbeeld:

jsxfunction App() {
  const [value, setValue] = useState('');
  
  function handleChange(event) {
    setValue(event.target.value);
  }
  
  return <div>
    <textarea value={value} onChange={handleChange} />
    <p>{value}</p>
  </div>;
}

In verkorte vorm:

jsxfunction App() {
  const [value, setValue] = useState('');
  
  return <div>
    <textarea value={value} onChange={event => setValue(event.target.value)} />
    <p>{value}</p>
  </div>;
}