Reactда стейтлардан фойдаланиш

Маҳсулот номини ўз ичига олган стейт яратиш учун useState функциясидан фойдаланамиз:

jsxconst state = useState('prod');

Натижада state константа массавни ташкил этади, унing биринчи элементида маҳсулот номи сақланади, иккинчисида эса уни ўзгартириш учун функция:

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

Қисқалиги учун одатда массав учун оралик константадан фойдаланмайди, балки деструктуризациядан фойдаланадилар:

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

Энди маҳсулот номи билан стейтимизни бирор версткада чиқарайлик:

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

Ҳаммасини бирлаштириб, куйидаги кодни оламиз:

jsximport React, { useState } from 'react';

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

export default App;

Агар бу кодни ишга туширсак, аввал дивда стейтнинг бошланғич қиймати чиқади, бизнинг ҳолимизда 'prod'. setName функцияси орқали стейт ўзгартирилганда версткада стейтнинг янги қиймати автомат равишда пайдо бўлади.