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 функциясы аркылуу өзгөртүп жатканда версткада стейттин жаңы мааниси автоматтык түрдө пайда болот.