Stāvokļu izmantošana React

Izmantosim funkciju useState, lai izveidotu stāvokli, kas satur produkta nosaukumu:

jsxconst state = useState('prod');

Rezultātā konstante state attēlos masīvu, kura pirmajā elementā tiks glabāts produkta nosaukums, un otrajā - funkcija nosaukuma maiņai:

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

Īsuma labad parasti neizmanto starpposma konstanti masīvam, bet izmanto destrukturizāciju:

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

Tagad attēlosim mūsu stāvokli ar produkta nosaukumu kādā no atzīmējumiem:

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

Apvienosim visu kopā un iegūsim šādu kodu:

jsximport React, { useState } from 'react';

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

export default App;

Ja palaidīsiet šo kodu, tad sākotnēji atvērumā tiks parādīta stāvokļa sākotnējā vērtība, mūsu gadījumā 'prod'. Mainot stāvokli, izmantojot funkciju setName, atzīmējumos automātiski parādīsies jaunā stāvokļa vērtība.