Aktualizacja kontekstu w React

W tej lekcji przyjrzymy się aktualizacji komponentów przy zmianie wartości kontekstu. Załóżmy, że chciałbyś, aby kontekst się zmieniał.

W tym przypadku warto zastosować kontekst w połączeniu ze stanami. Zmodyfikujmy nieco naszą aplikację z pudełkami, którą tworzyliśmy w poprzedniej lekcji i sprawmy, aby po kliknięciu przycisku przekazywana wartość zmieniła się na 'metal box :)'.

Weźmy więc nasz plik App i po BigBox narysujmy przycisk:

App.jsxfunction App() {
  return (
    <MyContext.Provider value="small box :)">
      <BigBox />
      <button>click</button>
    </MyContext.Provider>
  );
}

Następnie zaimportujmy hook useState i utwórzmy stan name, którego wartość będzie się zmieniać po kliknięciu przycisku. Ustawmy mu wartość początkową taką, którą od razu przekazywaliśmy wartością kontekstu, czyli 'small box :)':

App.jsxfunction App() {
  const [name, setName] = useState('small box :)');
}

Tym razem za pomocą kontekstu będziemy przekazywać nie łańcuch, ale stan name:

App.jsx<MyContext.Provider value={name}>
  <BigBox />
  <button>click</button>
</MyContext.Provider>

Jako ostatni krok wywołamy procedurę obsługi kliknięcia przycisku i za pomocą funkcji setName ustawimy nową wartość stanu na 'metal box :)'. Po tym można będzie kliknąć przycisk i sprawdzić wynik:

App.jsx<button onClick={() => {
  setName('metal box :)');
}}>click</button>