score:0

Accepted answer

you can move react.createcontext outside of the component's body, pass a value for the context at the provider and use react.usecontext for accessing the context's value.

const appcontext = react.createcontext('codeinabottle');

export default function app() {
  return (
    <div>
      <appcontext.provider value="somevalue">
        <router>
          <header />
          <switch>
            <route exact path="/">
              <home />
            </route>
          </switch>
          <footer />
        </router>
      </appcontext.provider>
    </div>
  );
}

export default function header() {
  const somevaluefromthecontext = react.usecontext(appcontext);

  console.log(somevaluefromthecontext); // 'somevalue'
  return (
    <header>
      <link to="/">{app}</link>
    </header>
  );
}

here's a working stackblitz


Related Query

More Query from same tag