App.js

// EXAMPLE WITH CONTEXT

import React, {useContext, useState} from 'react';

const AppContext = React.createContext(null);

const ContextProvider = ({children}) => {
  const [counter, setCounter] = useState(0);
  const contextValue = {
    counter,
    setCounter
  };
  
  return (
    <AppContext.Provider value={contextValue}>
      {children}
    </AppContext>
  );
}

const App = () => {
  const {counter, setCounter} = useContext(AppContext);
  return (
    <ContextProvider>
      <Counter />
    <ContextProvider/>
  );
}

const Counter = () => {
  const {counter, setCounter} = useContext(AppContext);
  return (
    <>
      <button onClick={() => setCounter(counter + 1)}>Click me</button>
      <p>You clicked me {counter} times</p>
    </>
  );
}