Reactda State-lardan foydalanish

Mahsulot nomini saqlaydigan state yaratish uchun useState funktsiyasidan foydalanamiz:

const 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:

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

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

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

Endi mahsulot nomi bilan state-ni qandaydir verstkada chiqaramiz:

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

Hammasini birlashtirib, quyidagi kodni olamiz:

import 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.

Faraz qilaylik, ekranda foydalanuvchi ma'lumotlarini ko'rsatmoqchisiz: uning ismi, familiyasi, yoshi. Buning uchun mos keladigan state-larni boshlang'ich qiymatlar bilan yarating.