What is the right way to elevate props in React?

Question

I apologize if my phrasing is wrong in the title. I've recently gotten cookies going in my app. My Topnav component needs access to them, but I'm unsure how to get them there.

App.js -

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Landing from './pages/Landing.js';
import LoginPage from './pages/LoginPage.js';
import Topnav from './pages/components/global/Topnav.js';
import './Global.css';

const App = props => (
  <div>
    <Topnav />
    <Switch>
      <Route exact path='/'      component={Landing} />
      <Route exact path='/login' component={LoginPage} />
    </Switch>
  </div>
);

export default App;

My login component grabs the cookie from express (fetch) and then does a <Redirect to='/' /> This loads up my Landing page, where I'm able to grab the cookie, but how do I get the cookie to the Topnav? I saw an answer to something like this on stack where it seems like App.js grabs the cookie and passes it as a props to the components, but I don't see how it could if it never refreshes. I've thought about forcing an entire window refresh (which does work for Topnav when I do a refresh manually), but I've also seen answers here that say don't do that.

Answer 1

Use Context

You need to use the new context hook from react.

Create a context

This is a context that you can access around your app.

const MyContext = React.createContext(defaultValue);

Make a provider

Wrap the provider around your main app

<MyContext.Provider value={/* some value */}>

Access the context at the point at which you get the cookies

Use this in both your login and top nav to use the value from the context

const value = useContext(MyContext);

Answer 2

There are multiple ways to approach this.

Probably a beginner friendly one.

When your login Component does the login successfully you need to signal to the App Component about it probably using a onLoginSuccessful which can then read the cookie and do a setState with it and use this component state value in the props to your Topnav and Landing Component