Stāvokļu izmantošana React

Izmantosim funkciju useState, lai izveidotu stāvokli, kas satur produkta nosaukumu:

const state = useState('prod');

Rezultātā konstante state attēlos masīvu, kura pirmajā elementā tiks glabāts produkta nosaukums, un otrajā - funkcija nosaukuma maiņai:

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

Īsuma labad parasti neizmanto starpposma konstanti masīvam, bet izmanto destrukturizāciju:

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

Tagad attēlosim mūsu stāvokli ar produkta nosaukumu kādā no atzīmējumiem:

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

Apvienosim visu kopā un iegūsim šādu kodu:

import React, { useState } from 'react';

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

export default App;

Ja palaidīsiet šo kodu, tad sākotnēji atvērumā tiks parādīta stāvokļa sākotnējā vērtība, mūsu gadījumā 'prod'. Mainot stāvokli, izmantojot funkciju setName, atzīmējumos automātiski parādīsies jaunā stāvokļa vērtība.

Pieņemsim, ka vēlaties ekrānā attēlot lietotāja datus: viņa vārdu, uzvārdu, vecumu. Izveidojiet tam atbilstošus stāvokļus ar sākotnējām vērtībām.