Állapotok használata Reactban

Használjuk a useState függvényt egy terméknevet tartalmazó állapot létrehozásához:

jsxconst state = useState('prod');

Ennek eredményeképpen a state konstans egy tömb lesz, melynek első eleme a termék neve, második eleme pedig a név megváltoztatására szolgáló függvény:

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

A rövidség kedvéért általában nem használnak köztes konstanst a tömbhöz, hanem destruktúrációt alkalmaznak:

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

Most jelenítsük meg állapotunkat a termék nevével valamilyen felépítésben:

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

Gyűjtsük össze az egészet, és megkapjuk a következő kódot:

jsximport React, { useState } from 'react';

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

export default App;

Ha ezt a kódot futtatjuk, akkor kezdetben a divben az állapot kezdeti értéke jelenik meg, esetünkben a 'prod'. Amikor az állapotot megváltoztatjuk a setName függvénnyel, akkor a felépítésben automatikusan megjelenik az állapot új értéke.