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

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

jsxconst 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:

jsxconst 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:

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

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

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

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

jsximport 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.