React-та стейттерді қолдану

Өнім атауын қамтитын стейт жасау үшін useState функциясын қолданайық:

jsxconst state = useState('prod');

Нәтижесінде state тұрақтысы массив болады, оның бірінші элементінде өнім атауы сақталады, ал екіншісінде - оны өзгерту функциясы:

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

Қысқалық үшін әдетте массив үшін аралық тұрақтыны қолданбайды, бірақ деструктуризацию қолданады:

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

Енді өнім атымен стейтімізді кейбір версткада шығарайық:

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

Барлығын жинап, келесі кодты алайық:

jsximport React, { useState } from 'react';

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

export default App;

Егер бұл кодты іске қоссақ, бастапқыда дивте стейттің бастапқы мәні шығады, біздің жағдайда 'prod'. setName функциясы арқылы стейтті өзгерткен кезде версткада стейттің жаңа мәні автоматты түрде пайда болады.