how to make snackbar a global component withContext

Question

I'm trying to use a snackbar component that takes an open and message prop and that I can display (set open to true) from any page of the app.

From what I understand I should use Context. But I'm not too sure where to start.

This is what I have so far

I'd like to have the snackbar at the highest parent component

import { createContext } from 'react';

export const SnackbarContext = createContext({});

 const [snack, setSnack] = useState({
    message: '',
    color: '',
    open: false,
  });

<SnackbarContext.Provider value={{ snack, setSnack }}>
  <Snackbar open={snack.open}>
    <Alert>
      {snack.message}
    </Alert>
  </Snackbar>
  <ViewContainer>
    <Switch>{switchRoutes}</Switch>
  </ViewContainer>
</SnackbarContext.Provider>

and be able to call it from any child component

import { SnackbarContext } from 'SnackbarContext';

const { snack, setSnack } = useContext(SnackbarContext);

and then change the props to snackbar like that

setSnack({ message: 'hello', open: true})

Answer 1

This solution actually works, I just made a typo