How to share variable with components

Question

The main application looks like this:

import Cookies from 'js-cookie';
function App() {
let cookie = Cookies.get('mycookie');
return (
    <>
        <Router>
            <div>
                {<Switch>
                    <Route path="/comp1">
                        <Comp1 />
                    </Route>
                    <Route path="/comp2">
                        <Comp2 />
                    </Route>
                </Switch>
            </div>
        </Router>
    </div>
);
}

As you can see, in the main app Im reading the cookie. Now, all the components will need to access the cookie. How can I make the components to read the cookie from the main app? Of course I could read the cookie by using "Cookies.get". But as Im doing other things in App.js than only reading the cookie, I would prefer to do operations once in App.js and then share all this with components.

You could pass them to your components directly like this <Comp1 cookie={cookie} /> and use this.props.cookie in your Comp1 — Guillaume Munsch
– Guillaume Munsch, Commented Sep 15, 2020 at 7:48
But IM not using classes. I guess the keywork "this" will not work? — oderfla
– oderfla, Commented Sep 15, 2020 at 7:49
If your component is a function, then it'll look like this function Comp1(props) { ... props.cookie; } — Guillaume Munsch
– Guillaume Munsch, Commented Sep 15, 2020 at 7:50

Drew Reese · Accepted Answer · 2020-09-15 08:01:44Z

You could pass as a prop to children/descendants that need it

import Cookies from 'js-cookie';

function App() {
  let cookie = Cookies.get('mycookie');
  return (
    <div>
      <Router>
        <div>
          {<Switch>
            <Route path="/comp1">
              <Comp1 cookie={cookie} />
            </Route>
            <Route path="/comp2">
              <Comp2 />
            </Route>
          </Switch>}
        </div>
      </Router>
    </div>
  );
}

In the component access via props

const { cookie } = props;

Or you can use the Context API and create a cookie context

export const CookieContext = React.createContext();

app

import Cookies from 'js-cookie';

function App() {
  let cookie = Cookies.get('mycookie');
  return (
    <div>
      <Router>
        <div>
          <CookieContext.Provider value={cookie}>
            {<Switch>
              <Route path="/comp1">
                <Comp1 />
              </Route>
              <Route path="/comp2">
                <Comp2 />
              </Route>
            </Switch>}
          </CookieContext.Provider>
        </div>
      </Router>
    </div>
  );
}

Inside a component

import { CookieContext } from './CookieContext';

const cookie = useContext(CookieContext);

Collectives™ on Stack Overflow

How to share variable with components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related