Подизање стања у React-у

Често неколико компоненти мора да приказује исте податке који се мењају. У React-у је препоручено да се заједничко стање подигне до најближег заједничког претка. Хајде да погледамо на примеру.

Рецимо да желимо да направимо калкулатор температуре воде. Он ће бити представљен пољем за унос, у које ће корисник уносити температуру, и параграфом, у који ће бити исписан пресуда: вода је течна, вода је чврста, вода је гасовита.

Рецимо да наш калкулатор представља компоненту-контејнер Calculator:

jsxfunction Calculator() {
  return <div>
    
  </div>;
}

Издвојимо поље за унос температуре у компоненту TempInp, а параграф са пресудом - у компоненту Verdict:

jsxfunction Calculator() {
  return <div>
    <Verdict />
    <TempInp />
  </div>;
}

Лако је разумети да и TempInp, и Verdict треба да имају стање са температуром. При томе је логично да то треба да буде иста температура: док се подаци уносе у поље, треба да се приказује пресуда.

У таквом случају је препоручено да се користи техника, која се зове подизање стања: стање, заједничко за две (или више) компоненте, се подиже навише до њиховог заједничког родитеља.

У нашем случају ће се испоставити да стање са температуром треба да припада компоненти Calculator, која ће га прослеђивати у TempInp и Verdict као пропсе:

jsxfunction Calculator() {
  const [temp, setTemp] = useState(0);
  
  return <div>
    <Verdict temp={temp} />
    <TempInp temp={temp} />
  </div>;
}

У компоненти TempInp треба да буде поље за унос за промену температуре. Али, пошто је та температура пропс ове компоненте, онда се директно у TempInp не може мењати. Исправно би било проследити из компоненте Calculator специјалну функцију за промену температуре:

jsxfunction Calculator() {
  const [temp, setTemp] = useState(0);
  
  function changeTemp(event) {
    setTemp(event.target.value);
  }
  
  return <div>
    <Verdict temp={temp} />
    <TempInp temp={temp} changeTemp={changeTemp} />
  </div>;
}

Може се, уосталом, не уводити нова функција, већ проследити у детећу компоненту функцију setTemp:

jsxfunction Calculator() {
  const [temp, setTemp] = useState(0);
  
  return <div>
    <Verdict temp={temp} />
    <TempInp temp={temp} setTemp={setTemp} />
  </div>;
}