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

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

const state = useState('prod');

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

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

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

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

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

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

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

import React, { useState } from 'react';

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

export default App;

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

Фарз қилайлик, сиз экранда фойдаланувчи маълумотларини кўрсатмоқчисиз: унинг исми, фамилияси, ёши. Бунинг учун мос стейтларни бошланғич қийматлар билан яратинг.