React context between unrelated components

Question

For learning purposes I'm just trying to render this dumb example where Component A has a variable that creates a random number and another (unrelated) Component B can render it with useContext. I don't know how to make the provider of the context to know that the value is the variable from Component A.

I created another file to do the React.createContext()... but still don't know how to make the random number to reach there or the App Component to do the Provider. I know I could create the random number in App component and provide whatever component I want with that value, but I just want the value to be generated in Component A and reach Component B. Any ideas? Maybe its so simple I can't see it.

What I have at the moment:

Component A:

import React from'react';

export default function RandomNumGenerator() {

    const randomNum = Math.random();

    return(
        <h2>Your random number is:</h2>
    )
}

Component B:

import React from'react';

export default function RandomNumRenderizator() {

    return(
        <h2></h2> //Want to render the random num here
    )
}

App Component:

import React from 'react';

import RandomNumGenerator from "./FunctionalComponents/RandomNumGenerator/RandomNumGenerator";
import RandomNumRenderizator from "./FunctionalComponents/RandomNumRenderizator/RandomNumRenderizator";
import RandomNumContext from "./contexts/RandomNumContext";


export default function App() {

  return (
    <div>
      <RandomNumGenerator/>
      <RandomNumContext.Provider value={}> //Empty value as I don't know what to send
        <RandomNumRenderizator/>
      </RandomNumContext.Provider>
    </div>
  );
}

And the Context:

import React from "react";
const RandomNumContext = React.createContext(); //Don't know if there should be anything as defaultValue
export default RandomNumContext;

Context not work like this. You need to pass the value which can be used at any children. If you need context. Let me know will update your example — Shubham Verma, Sep 28 '20 at 14:47
Yes, I know. But how do I pass the value if it is born in a component and I dont want it to born in App Component? — Za Fra, Sep 28 '20 at 14:48

Dennis Vash · Answer 1 · 2020-09-28T14:54:58.650

0

As data flows down in React, the value you wish to pass have to be in scope with the context provider, then you just need to read the context value using a hook:

export default function App() {
  const randomNum = Math.random();
  return (
    <>
      <RandomNumDisplay num={randomNum} />
      <RandomNumContext.Provider value={randomNum}>
        <RandomNumRenderizator />
      </RandomNumContext.Provider>
    </>
  );
}

export default function RandomNumRenderizator() {
  const randomNum = useContext(RandomNumContext);
  return <h2>{randomNum}</h2>;
}

edited Sep 28 '20 at 14:54

answered Sep 28 '20 at 14:48

Dennis Vash

50,196
9
100
118

And is there any way to make randomNum variable to be born not in App Component but in RandomNumDisplay? – Za Fra Sep 28 '20 at 14:52
Please read the shared link, it can "born" in NumDisplay but it still will have to call some callback which comes from `App` for passing it to the provider, as data flows down. – Dennis Vash Sep 28 '20 at 14:53
Oh thats what I wanted. I'll try with a callback. Thank you. – Za Fra Sep 28 '20 at 14:59

React context between unrelated components

1 Answers1