Utilizzo degli State in React

Utilizziamo la funzione useState per creare uno state contenente il nome del prodotto:

const state = useState('prod');

Di conseguenza, la costante state rappresenterà un array, nel primo elemento del quale sarà memorizzato il nome del prodotto, e nel secondo - la funzione per modificare il nome:

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

Per brevità, solitamente non si utilizza una costante intermedia per l'array, ma si usa la destrutturazione:

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

Ora visualizziamo il nostro state con il nome del prodotto in qualche markup:

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

Mettiamo tutto insieme e otteniamo il seguente codice:

import React, { useState } from 'react';

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

export default App;

Se eseguiamo questo codice, inizialmente nel div verrà visualizzato il valore iniziale dello state, nel nostro caso 'prod'. Quando lo state viene modificato tramite la funzione setName, nel markup apparirà automaticamente il nuovo valore dello state.

Supponiamo che tu voglia visualizzare sullo schermo i dati dell'utente: il suo nome, cognome, età. Crea gli state corrispondenti con valori iniziali.