Používání stavů v Reactu

Použijeme funkci useState pro vytvoření stavu obsahujícího název produktu:

jsxconst state = useState('prod');

Výsledkem bude, že konstanta state bude představovat pole, v jehož prvním prvku bude uložen název produktu, a ve druhém - funkce pro změnu názvu:

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

Pro zkrácení obvykle nepoužívají mezilehlou konstantu pro pole, ale používají destrukturalizaci:

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

Nyní vypišme náš stav s názvem produktu do nějakého HTML:

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

Spojíme vše dohromady a získáme následující kód:

jsximport React, { useState } from 'react';

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

export default App;

Pokud spustíte tento kód, zpočátku se v divu zobrazí počáteční hodnota stavu, v našem případě 'prod'. Při změně stavu pomocí funkce setName se v HTML automaticky objeví nová hodnota stavu.