Utilizzo degli State in React

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

jsxconst 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:

jsxconst 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:

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

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

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

Mettiamo tutto insieme e otteniamo il seguente codice:

jsximport 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.