Reactda State-lardan foydalanish

Mahsulot nomini saqlaydigan state yaratish uchun useState funktsiyasidan foydalanamiz:

jsxconst state = useState('prod');

Natijada state o'zgaruvchisi massiv bo'lib, uning birinchi elementida mahsulot nomi saqlanadi, ikkinchi elementida esa uni o'zgartirish funktsiyasi bo'ladi:

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

Qisqalik uchun odatda massiv uchun oraliq o'zgaruvchi o'rniga destrukturalizatsiyadan foydalaniladi:

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

Endi mahsulot nomi bilan state-ni qandaydir verstkada chiqaramiz:

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

Hammasini birlashtirib, quyidagi kodni olamiz:

jsximport React, { useState } from 'react';

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

export default App;

Agar ushbu kodni ishga tushirsak, dastlab div ichida state-ning boshlang'ich qiymati, bizning holatda 'prod' chiqadi. setName funktsiyasi orqali state o'zgarganda, verstkada avtomatik ravishda state-ning yangi qiymati paydo bo'ladi.