Истифодаи стейтҳо дар React

Аз функсияи useState барои соҳатан кардани стейте, ки номи маҳсулотро нигоҳ медорад, истифода барем:

const state = useState('prod');

Дар натиҷа доимии state хоҳад буд массиве, ки дар унсури якумаш номи маҳсулот нигоҳ дошта мешавад, ва дар дуюмаш - функсия барои тағйир додани ном:

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 дар верстка қимати нави стейт худкор пайдо мешавад.

Фарз кунем, ки шумо мехоҳед дар экран маълумотҳои корбариро нишон диҳед: номаш, насабаш, синну солаш. Барои ин стейтҳои мувофиқро бо қиматҳои ибтидоӣ созед.