Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why can't I grab state from one component to another component?

  • I have two function component (component1) and it’s a main component and (component2) which i want to grap state data from it
import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";

const TestContext = createContext();

function Component1() {
  const test = useContext(TestContext);
  return (

      <h1>{`${test}`}</h1>
      
  );
}

function Component2() {
      const [test, setTest] = useState("From Component 3");

  return (
    <TestContext.Provider value={test}>
      <Component1 />
    </TestContext.Provider>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Component1 />);

In this question:

  • I want to use only useContext Hook to bring state
  • I want Component1 is the rendered component.

I try a lot but always the result is "undefined"

Tags:

2

Answers


  1. 0

    To ensure that Component1 receives the context value from Component2, we need to make sure that Component1 is rendered within the TestContext.Provider provided by Component2.

    import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";

const TestContext = createContext();

function Component1() {
  const test = useContext(TestContext);
  return (
    <h1>{`${test}`}</h1>
  );
}

function Component2() {
  const [test, setTest] = useState("From Component 3");

  return (
    <TestContext.Provider value={test}>
      <Component1 />
    </TestContext.Provider>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Component2 />);

    modified version:

    1. Component1 is rendered within the TestContext.Provider provided by Component2.
    2. Component2 provides the context value to its children, including Component1.
    3. Component1 consumes the context value using the useContext hook.

    Now, when you render Component2, Component1 will receive the context value provided by Component2.

    Login or Signup to reply.
  2. 0

    Here it is why it says undefined.

    • you rendering the wrong component. Instead of <Component1/> you have to render the <Component2/>
    import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";

const TestContext = createContext();

function Component1() {
  const test = useContext(TestContext);
  return (
    <h1>{`${test}`}</h1>
  );
}

function Component2() {
  const [test, setTest] = useState("From Component 3");

  return (
    <TestContext.Provider value={test}>
      <Component1 />
    </TestContext.Provider>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Component2 />);

    With this change, Component2 will be the initially rendered component, and it will wrap Component1 with the TestContext.Provider, providing the state value. Component1 can then access the state value through the useContext hook.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search