Gebruik van states in React

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

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

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

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

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

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

Laten we alles samenvoegen en we krijgen de volgende code:

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