Gebruik van states in React

Laten we de functie useState gebruiken om een state aan te maken die de productnaam bevat:

const state = useState('prod');

Als resultaat zal de constante state een array zijn, waarvan het eerste element de productnaam bevat, en het tweede - een functie om de naam te wijzigen:

const state   = useState('prod');
const name    = state[0];
const setName = state[1];

Voor de bondigheid wordt meestal geen tussenliggende constante voor de array gebruikt, maar wordt destructurering gebruikt:

const [name, setName] = useState('prod');

Laten we nu onze state met de productnaam weergeven in een soort opmaak:

return <p>
	<span>{name}</span>
</p>;

Laten we alles samenvoegen en we krijgen de volgende code:

import React, { useState } from 'react';

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
	</div>;
}

export default App;

Als je deze code uitvoert, zal initieel in de div de beginwaarde van de state worden weergegeven, in ons geval 'prod'. Bij het wijzigen van de state via de functie setName zal in de opmaak automatisch de nieuwe waarde van de state verschijnen.

Stel dat je de gebruikersgegevens op het scherm wilt weergeven: zijn voornaam, achternaam, leeftijd. Maak hiervoor de bijbehorende states met beginwaarden.