Podizanje stanja u React-u

Nekoliko komponenti često treba da prikazuje iste promenljive podatke. U React-u je preporučeno da se deljeno stanje podigne do najbližeg zajedničkog pretka. Pogledajmo na primeru.

Pretpostavimo da želimo da napravimo kalkulator temperature vode. Predstavljaće ga input polje, u koje korisnik unosi temperaturu, i pasus u koji će biti ispisan rezultat: tečnost, led ili para.

Neka naš kalkulator predstavlja kontejnersku komponentu Calculator:

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

Izdvojimo input za unos temperature u komponentu TempInp, a pasus sa rezultatom - u komponentu Verdict:

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

Lako je shvatiti da i TempInp i Verdict treba da imaju stanje sa temperaturom. Pri tome je logično, da to treba da bude ista temperatura: kako se podaci unose u input polje, rezultat treba da se prikazuje.

U ovom slučaju je preporučeno koristiti tehniku, koja se naziva podizanje stanja: stanje, zajedničko za dve (ili više) komponente podiže se naviše do njihovog zajedničkog roditelja.

U našem slučaju će ispasti da stanje sa temperaturom treba da pripada komponenti Calculator, koji će ga prosleđivati u TempInp i Verdict kao props:

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

U komponenti TempInp treba da bude input polje za promenu temperature. Međutim, pošto je ova temperatura props ove komponente, nije moguće direktno u TempInp menjati nju. Ispravno je proslediti iz komponente Calculator specijalnu funkciju za promenu temperature:

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>;
}

Može se, inače, ne uvoditi nova funkcija, već proslediti u child komponentu funkciju setTemp:

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