skip to Main Content
import React from 'react'
import ReactDOM from 'react-dom'
import { useContext } from 'react'

const konteks = React.createContext(null);

function components(){
  return(
   <konteks.Provider value="hello world">
      <MyComponent />
    </konteks.Provider>
  );
}

function MyComponent(){
  const getcontext = useContext(konteks);
  return(
    <div>{getcontext}</div>
  );
}
const body = ReactDOM.createRoot(document.getElementById("body"));
body.render(<MyComponent/>);


I already know the use of useContext, where we can pass data to other components,But I’m still confused regarding the implementation and the code above doesn’t error’ but just doesn’t work cause i thought it will print the hello world on the web browser.

Which part is wrong in my code?

2

Answers


  1. You’re rendering MyComponent, not components (which would have the Provider), so the value of the konteks context is null.

    const konteks = React.createContext(null);
    
    function ComponentWithProvider() {
      return (
        <konteks.Provider value="hello world">
          <MyComponent />
        </konteks.Provider>
      );
    }
    
    function MyComponent() {
      const value = React.useContext(konteks);
      return <div>{value}</div>;
    }
    ReactDOM.render(<ComponentWithProvider />, document.getElementById("body"));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
    
    <div id="body"></div>
    Login or Signup to reply.
  2. This is a official example:

    App.js

    import Heading from './Heading.js';
    import Section from './Section.js';
    
    export default function Page() {
      return (
        <Section>
          <Heading>Title</Heading>
          <Section>
            <Heading>Heading</Heading>
            <Heading>Heading</Heading>
            <Heading>Heading</Heading>
            <Section>
              <Heading>Sub-heading</Heading>
              <Heading>Sub-heading</Heading>
              <Heading>Sub-heading</Heading>
              <Section>
                <Heading>Sub-sub-heading</Heading>
                <Heading>Sub-sub-heading</Heading>
                <Heading>Sub-sub-heading</Heading>
              </Section>
            </Section>
          </Section>
        </Section>
      );
    }
    

    Section.js

    import { useContext } from 'react';
    import { LevelContext } from './LevelContext.js';
    
    export default function Section({ children }) {
      const level = useContext(LevelContext);
      return (
        <section className="section">
          <LevelContext.Provider value={level + 1}>
            {children}
          </LevelContext.Provider>
        </section>
      );
    }
    

    Heading.js

    import { useContext } from 'react';
    import { LevelContext } from './LevelContext.js';
    
    export default function Heading({ children }) {
      const level = useContext(LevelContext);
      switch (level) {
        case 0:
          throw Error('Heading must be inside a Section!');
        case 1:
          return <h1>{children}</h1>;
        case 2:
          return <h2>{children}</h2>;
        case 3:
          return <h3>{children}</h3>;
        case 4:
          return <h4>{children}</h4>;
        case 5:
          return <h5>{children}</h5>;
        case 6:
          return <h6>{children}</h6>;
        default:
          throw Error('Unknown level: ' + level);
      }
    }
    
    

    LevelContext.js

    import { createContext } from 'react';
    
    export const LevelContext = createContext(0);
    
    

    Hope you can understand.

    Result:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search