Tilojen käyttö Reactissa

Käytetään funktiota useState tilan luomiseen, joka sisältää tuotteen nimen:

jsxconst state = useState('prod');

Tuloksena vakio state on taulukko, jonka ensimmäinen elementti sisältää tuotteen nimen, ja toinen - funktion nimen muuttamiseksi:

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

Lyhyyden vuoksi välikonstanttia taulukolle yleensä ei käytetä, vaan käytetään destrukturointia:

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

Esitetään nyt tilamme tuotteen nimellä jossain merkintäkielessä:

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

Kootaan kaikki yhteen ja saadaan seuraava koodi:

jsximport React, { useState } from 'react';

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

export default App;

Jos tämä koodi käynnistetään, niin aluksi div-elementissä näytetään tilan alkuarvo, meidän tapauksessamme 'prod'. Kun tila muutetaan funktiolla setName, niin merkintäkieleen tulee automaattisesti tilan uusi arvo.