Używanie stanów w React

Skorzystajmy z funkcji useState, aby utworzyć stan zawierający nazwę produktu:

jsxconst state = useState('prod');

W rezultacie stała state będzie reprezentować tablicę, w pierwszym elemencie której będzie przechowywana nazwa produktu, a w drugim - funkcja do zmiany nazwy:

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

Dla zwięzłości zwykle nie używa się stałej pośredniej dla tablicy, ale wykorzystuje się destrukturyzację:

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

Spróbujmy teraz wypisać nasz stan z nazwą produktu w jakimś kodzie HTML:

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

Zbierzmy wszystko razem i otrzymamy następujący kod:

jsximport React, { useState } from 'react';

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

export default App;

Jeśli uruchomimy ten kod, to początkowo w divie wyświetli się początkowa wartość stanu, w naszym przypadku 'prod'. Przy zmianie stanu za pomocą funkcji setName w kodzie HTML automatycznie pojawi się nowa wartość stanu.