React js context api is not woking how to fix it?

Question

I'm was making the shopping card Project and I decide to use Contextapi and useReducer for my state management at the start of my project I wrap the App in context Api and it crash my App Here is the Code.

****Main Index *******

    import React from "react";
    import ReactDOM from "react-dom";
    import "./index.css";
    import App from "./App";
    import Context from "./Context";

    ReactDOM.render(
     <React.StrictMode>
      <Context>
      <App />
    </Context>   </React.StrictMode>,
   document.getElementById("root")
  );

**** Context Api******

import { createContext } from "react";
const Card = createContext();
const Context = ({ childern }) => {
  return <Card.Provider>{childern}</Card.Provider>;
};

    export default Context;

What is the error saying? Could you may be provide a simple codesanbox? — Ryan Le, Mar 18 '22 at 03:58
The `value` prop is required for the ``. Did you misspell it or forget to pass it? — z Hunter, Mar 18 '22 at 04:16

score 0 · Answer 1 · answered Mar 18 '22 at 04:10

0

Just a guess because you didn't provide enough information on the error but you could try moving the context initialization to a separate module and just import it where you need it.

I ran into a strange runtime issue when I initialized it in a UI component.

answered Mar 18 '22 at 04:10

Levesque

874
7
6

The value prop is required for the . Did you misspell it or forget to pass it? – z Hunter Mar 18 '22 at 04:17

score 0 · Answer 2 · answered Mar 18 '22 at 05:08

You need to pass a value prop to context provider without that there is no point of using context API.

As you have mentioned you are using useReducer , an example would be like below to pass the state to the children.

const Context = ({ childern }) => {
  const [state,dispatch] = useReducer(reducer,initialState)
  return <Card.Provider value={state}>{childern}</Card.Provider>;
};

score 0 · Answer 3 · answered Aug 11 '23 at 15:27

0

You need to export the Card object

import { createContext } from "react";
const Card = createContext();
const Context = ({ childern }) => {
  return <Card.Provider>{childern}</Card.Provider>;
};
    export { Card };
    export default Context;

answered Aug 11 '23 at 15:27

Robera Abera

1

React js context api is not woking how to fix it?

3 Answers3