Korišćenje stanja u Reactu

Upotrebimo funkciju useState za kreiranje stanja koje sadrži naziv proizvoda:

const state = useState('prod');

Kao rezultat, konstanta state će predstavljati niz, u čijem prvom elementu će biti sačuvan naziv proizvoda, a u drugom - funkcija za promenu naziva:

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

Za kratkoću obično se ne koristi međukonstanta za niz, već se koristi destrukturiranje:

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

Hajde sada da prikažemo naše stanje sa imenom proizvoda u nekom delu interfejsa:

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

Sastavimo sve zajedno i dobijamo sledeći kod:

import React, { useState } from 'react';

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

export default App;

Ako pokrenemo ovaj kod, inicijalno će u elementu div biti prikazana početna vrednost stanja, u našem slučaju 'prod'. Kada se stanje promeni putem funkcije setName, u interfejsu će automatski da se pojavi nova vrednost stanja.

Pretpostavimo da želite da prikažete na ekranu podatke korisnika: njegovo ime, prezime, godine. Napravite za to odgovarajuća stanja sa početnim vrednostima.