Reactjs - How To Use useContext react

ApabilaXTerkadang
November 2, 2023
237 views
0 votes
2 Answers

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?

Answers

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>

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:

Please signup or login to give your own answer.

Click here to cancel reply.

Reactjs – How To Use useContext react

Answers