Hook del contesto useContext in React

In questa lezione continueremo a lavorare con il contesto. Ora costruiremo un albero di componenti. Per iniziare, in un file separato creeremo il componente React BigBox:

BigBox.jsxfunction BigBox() {
  return (
    <p>bigbox</p>
  );
}

Importiamolo e posizioniamolo nel nostro componente principale App:

App.jsximport BigBox from './BigBox';

function App() {
  return (
    <BigBox />
  );
}

Per maggiore chiarezza, applicheremo un po' di stili ai div. Per fare ciò, creiamo il file styles.css:

styles.cssdiv {
  border: 1px solid blue;
  margin: 10px;
  text-align: center;
  max-width: 300px;
}

Non dimentichiamo di importarlo in App.js:

App.jsximport './styles.css';

Ora in un file separato creiamo il componente MiddleBox:

MiddleBox.jsxfunction MiddleBox() {
  return (
    <p>middlebox</p>
  );
}

E inseriamolo nella scatola grande BigBox:

BigBox.jsximport MiddleBox from './MiddleBox';

function BigBox() {
  return (
    <div>
      <MiddleBox />
    </div>
  );
}

Ripetiamo la stessa cosa con la scatola piccola SmallBox:

SmallBox.jsxfunction SmallBox() {
  return (
    <p>Io sono ... </p>
  );
}

Posizioniamo due di queste scatole in MiddleBox:

MiddleBox.jsximport SmallBox from './SmallBox';

function MiddleBox() {
  return (
    <div>
      <SmallBox />
      <SmallBox />
    </div>
  );
}

L'albero è costruito. E ora vogliamo passare dal nostro App, supponiamo, a SmallBox un valore stringa 'small box :)', senza utilizzare le props, ma utilizzando il contesto (nel caso in cui la nostra applicazione a scatole cresca fino a dimensioni enormi).

Il file con il contesto MyContext.js lo abbiamo già creato e collegato nella lezione precedente.

Il prossimo passo che faremo è avvolgere BigBox nel provider del contesto, che è una proprietà del nostro oggetto contesto MyContext. Ora tutti i componenti racchiusi in questa costruzione (e quindi tutte le scatole annidate in BigBox) potranno accedere e sottoscriversi alle modifiche del contesto. Come valore del contesto passiamo il desiderato 'small box :)':

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

E ora non resta che leggere il valore del contesto. Volevamo usarlo in SmallBox, quindi importiamo lì il file contesto MyContext.js e l'hook useContext:

SmallBox.jsximport { useContext } from 'react';
import { MyContext } from './MyContext.js';

Leggiamo usando useContext il valore del contesto nella variabile name:

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>Io sono ... </p>
    </div>
  );
}

Abbiamo sottoscritto SmallBox a questo contesto e, se cambia, anche questo componente verrà aggiornato.

E, infine, sostituiamo il valore della variabile name ai puntini di sospensione:

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>Io sono {name} </p>
    </div>
  );
}