Travailler avec textarea dans React

Apprenons maintenant à travailler avec le champ de saisie multiligne textarea. Dans React, pour plus de commodité, son fonctionnement a été rendu similaire à celui d'une entrée texte. Contrairement au JS pur, dans React, textarea n'a pas besoin de balise fermante, et son texte doit être placé dans l'attribut value.

Voir l'exemple :

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

Sous forme abrégée :

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

Supposons que du texte soit saisi dans textarea. Faites en sorte que le translittération du texte saisi soit affichée dans le paragraphe.

Supposons que des nombres soient saisis sur chaque ligne de textarea. Faites en sorte qu'au fur et à mesure de la saisie, la somme des nombres saisis soit affichée dans le paragraphe.