Користење на state-и во React

Ќе ја искористиме функцијата useState за креирање state кој содржи име на производ:

const state = useState('prod');

Како резултат, константата state ќе претставува низа, во чиј прв елемент ќе се чува името на производот, а во вториот - функција за промена на името:

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

За краток запис обично не се користи посредна константа за низата, туку се користи деструктурирање:

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

Ајде сега да го прикажеме нашиот state со името на производот во некој вид на markup:

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;

Ако се стартува овој код, првично во div-от ќе се прикаже почетната вредност на state-от, во нашиот случај 'prod'. При промена на state-от преку функцијата setName во markup-от автоматски ќе се појави новата вредност на state-от.

Нека сакате да прикажувате на екранот податоци за корисникот: неговото име, презиме, возраст. Направете за ова соодветни state-и со почетни вредности.