Riippuvuudet useEffectissä Reactissa
Nyt vaihdetaan väriä painiketta painamalla.
Luodaan tila color värille,
antamalla sille alkuarvo:
const [color, setColor] = useState('green');
Korvataan merkkijonoarvo tilallamme
useEffect:ssä eikä unohdeta lisätä sitä
riippuvuuslistaan hakasulkeissa.
Nyt efekti suoritetaan joka
kerta kun tila color muuttuu:
function App() {
useEffect(() => {
document.body.style.backgroundColor = color;
}, [color]);
...
}
Lisätään nyt painike värin vaihtamiseen komponenttiimme:
return (
<div>
<h1>React App</h1>
<button onClick={changeColor}>change</button>
</div>
);
Lisätään myös klikinkäsittelijäfunktio, joka vaihtaa värimme oranssiksi:
function changeColor() {
setColor('orange');
}
Annettu tila käyttäjänimen kanssa. Tee niin, että joka kerta kun nimeä muutetaan, tilan arvo kirjoitetaan selaimen paikalliseen muistiin.
