Value is undefined while passing data with Context API

Question

I'm trying to pass data with Context API to child components. Value is getting undefined upon fetching it from a component.

Component Hierarchy:

passing data to a component MockTable and UsecasePane
MainContent -> MockTable
MainContent -> AddMock -> TabContent -> UsecasePane

=> MockContext.js

import React, { useState, useEffect, createContext } from "react";
import axios from "axios";

export const MockContext = createContext();

// provider
export const MockProvider = (props) => {
  const [data, setData] = useState([]);
  
   // data fetch and setting the state

  return (
    <MockContext.Provider data={[data, setData]}>
      {props.children}
    </MockContext.Provider>
  );
};

Note: I'm getting response from the API.

Now in MainContent, components are encapsulated as follows:

// MainContent.js

import React from "react";
import { MockProvider } from "../MockContext";

const MainContent = () => {
  return (
    <MockProvider>
      <div>
        <CustomerTable />
        <AddMock />
        <MockTable />
      </div>
    </MockProvider>
  );
};

When I try to fetch the data in MockTable or in UseCasePane, value is undefined.

// MockTable.js

import React, { useState, useEffect, useContext } from "react";
import { MockContext } from "./MockContext";

const MockTable = () => {

  const [data, setData] = useContext(MockContext);
  console.log(data);

  // rest of the code

}

Please correct me where I'm going wrong :)

I tried to pass a String as well from the context and fetched in a component like:

return (
    <MockContext.Provider data={"Hello"}>
      {props.children}
    </MockContext.Provider>
  );

// in MockTable.js
const value = useContext(MockContext); ==> undefined

@AyushWalia: There is error. It will shows object is not iterable since the value is undefined — Akhil Suseelan
– Akhil Suseelan, Commented Aug 6, 2020 at 9:10
Is response.data an array and was it set correctly in the <MockProvider />? — codemax
– codemax, Commented Aug 6, 2020 at 9:13

3limin4t0r · Accepted Answer · 2020-08-06 10:16:09Z

3

The correct prop to pass into the Provider is value, not data. (See: Context.Provider)


import React, { useState, useEffect, createContext } from "react";
import axios from "axios";

export const MockContext = createContext();

// provider
export const MockProvider = (props) => {
  const [data, setData] = useState([]);
  const fetchData = async () => {
    const response = await axios
      .get(config.App_URL.getAllRoute, {
        params: {
          customHostName: config.host,
          type: config.type,
        },
      })
      .catch((error) => {
        console.error(`Error in fetching the data ${error}`);
      });
    console.log(response.data);
    setData(response.data);
  };
  useEffect(() => {
    fetchData();
  }, []);

  return (
    <MockContext.Provider value={[data, setData]}>
      {props.children}
    </MockContext.Provider>
  );
};

edited Aug 6, 2020 at 10:16

3limin4t0r

21.4k3 gold badges38 silver badges61 bronze badges

answered Aug 6, 2020 at 9:45

codemax

1,35210 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

3limin4t0r Over a year ago

I suggest cleaning up the code block to only the line(s) that matters. The answer currently contains a lot of noise since you copied the whole code block but only changed one thing. I would show only the <MockContext.Provider value={...}> line, or the whole return statement. Everything above the return statement only makes the answer less readable imo.

Akhil Suseelan Over a year ago

Thanks @codeMax :) and 3limin4t0r for your suggestions. i'll clean up the code block

Collectives™ on Stack Overflow

Value is undefined while passing data with Context API

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related