Реактивност на состојбите во React

Ајде сега да погледнеме како работи реактивноста. Таа прави така што при промена на состојбата, промените моментално се прикажуваат на екранот.

Ајде да погледнеме на пример. Нека имаме состојба со име на производот:

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

Ќе го прикажеме името на производот во HTML-от:

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

Сега ќе направиме копче, при клик на кое нашата состојба ќе се промени:

jsxreturn <div>
  <span>{name}</span>
  <button onClick={clickHandler}>btn</button>
</div>;

Во обработувачот на клик ја користиме функцијата setName, за да го поставиме на производот новото име:

jsxfunction clickHandler() {
  setName('xxxx');
}

Ајде да го собереме целиот наш код заедно. Ќе испадне дека по притискање на копчето, текстот моментално ќе се промени во новата вредност:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  function clickHandler() {
    setName('xxxx');
  }
  
  return <div>
    <span>{name}</span>
    <button onClick={clickHandler}>btn</button>
  </div>;
}

Користењето на посебни функции-обработувачи не е задолжително. Може да се користи анонимна стрелкаста функција:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
    <button onClick={() => setName('xxxx')}>btn</button>
  </div>;
}