React-də State-lərdən Istifadə

Məhsulun adını ehtiva edən state yaratmaq üçün useState funksiyasından istifadə edək:

const state = useState('prod');

Nəticədə state sabiti bir massiv olacaq, onun birinci elementində məhsulun adı, ikincisində isə adı dəyişdirmək üçün funksiya saxlanılacaq:

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

Qısalıq üçün adətən massiv üçün aralıq sabitdən istifadə edilmir, əvəzinə destrukturizasiyadan istifadə olunur:

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

Gəlin indi məhsulun adı ilə state-imizi bir istənilən qrafik interfeysdə çıxaraq:

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

Gəlin hamısını birləşdirək və aşağıdakı kodu əldə edək:

import React, { useState } from 'react';

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

export default App;

Bu kodu işə salsaq, əvvəlcə div-də state-in ilkin qiyməti, bizim vəziyyətimizdə 'prod' çıxarılacaq. setName funksiyası vasitəsilə state dəyişdirildikdə qrafik interfeysdə avtomatik olaraq state-in yeni qiyməti peyda olacaq.

Tutaq ki, ekranda istifadəçi məlumatlarını göstərmək istəyirsiniz: onun adı, soyadı, yaşı. Bunun üçün müvafiq ilkin qiymətləri olan state-lər yaradın.