Condividere dati tra componenti in React con useContext

useContext è uno hook per React che ci permette di condividere dati tra componenti.

In questo articolo ne vediamo un esempio basico.

Non ci sono librerie da installare.

Cominciamo con il file context.js che crea il nostro context:

import React from "react";

const MyCtx = React.createContext();

export default MyCtx;

Adesso create un componente tipo questo:

import {useContext} from "react";
import MyCtx from "./context";

function OtherComp() {
  const data = useContext(MyCtx);

  return (
      <>
        <div>{data}</div>
      </>
  )
}

export default OtherComp;

Come vedete si limita a visualizzare i dati del context.

Infine:

import React from 'react';
import MyCtx from "./context";
import OtherComp from "./OtherComp";

function App() {
  const data = "Dati da condividere";

  return (
      <>
        <MyCtx.Provider value={data}>
          <OtherComp></OtherComp>
        </MyCtx.Provider>
      </>
  );
}

export default App;

Enjoy!