Përdorimi i State-ve në React

Le të përdorim funksionin useState për të krijuar një state që përmban emrin e produktit:

const state = useState('prod');

Si rezultat, konstantja state do të përfaqësojë një array, ku në elementin e parë do të ruhet emri i produktit, kurse në të dytin - funksioni për ndryshimin e emrit:

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

Për shkurtësi zakonisht nuk përdoret konstanta e ndërmjetme për array, por përdoret destrukturalizimi:

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

Tani le të shfaqim state-in tonë me emrin e produktit në ndonjë markup:

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

Le të mbledhim të gjitha së bashku dhe të marrim kodin e mëposhtëm:

import React, { useState } from 'react';

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

export default App;

Nëse ekzekutohet ky kod, fillimisht në div do të shfaqet vlera fillestare e state-it, në rastin tonë 'prod'. Kur ndryshohet state-i përmes funksionit setName, në markup do të shfaqet automatikisht vlera e re e state-it.

Supozoni se dëshironi të shfaqni në ekran të dhënat e përdoruesit: emrin, mbiemrin, moshën. Krijo për këtë state-t përkatës me vlerat fillestare.