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

Келгиле, экранда колдонуучунун маалыматтарын: анын атын, фамилиясын, жашын көрсөтүүнү каалайсыз деп ойлойлу. Бул үчүн тиешелүү баштапкы маанилери бар стейттерди жасаңыз.