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 функциясы арқылы стейтті өзгерткен кезде версткада стейттің жаңа мәні автоматты түрде пайда болады.

Экранда пайдаланушы деректерін көрсеткіңіз келеді делік: оның аты, тегі, жасы. Ол үшін сәйкес стейттерді бастапқы мәндермен жасаңыз.