Props value is Undefined while passing through Context API in REACT

Question

My Provider File of Context API (Exp file)

import react form 'react';
import {createContext} from "react";

export const ContextforFile = createContext();

export function ContextData(props){
   let rdata=props.data
return(
   <>
  <p>{rdata}</p>  //I am able to Get the Data here NO ISSUES TILL HERE
  <ContextforFile.Provider value={rdata} >{props.children}</ContextforFile.Provider>
  </>
);
}

function A() {
  return (
    <div>
      <ContextData data="Sara" />
    </div>
  );
}

export default A;

My App.js File

import Exp, { ContextData } from './afterlogin/patirel/patmain';
import Experiment from './experi';
import {Routes,Route} from 'react-router-dom';
import * as React from 'react';

function App() {
 

  return (

   <ContextData>

    <div>
    <Routes>
      <Route index element={<Exp/>} />
      <Route path="/experi" element={<Experiment/>} />
      </Routes>

    </div>
    </ContextData>

  );
}

export default App;

only props.data value is not coming here while other values can be easily obtained This is Experi file Where I want to get my values my Consumer File



import * as React from 'react';
import { useContext } from 'react';
import { ContextforFile } from './afterlogin/patirel/patmain';

export default  function Experi(){

const first= useContext(ContextforFile);
return(
    <div>
   <h1>ISSUE is Here Other VALUES are COMING BUT NOT props.data: {first}</h1>
    </div>
);

  }

Please help! It's been days and i cannot figure out what am i missing? How can I resolve it?

score 1 · Answer 1 · answered Jun 19 '22 at 06:08

1

Your function ContextData does not return anything. Yoo should return the ContextforFile.Provider

answered Jun 19 '22 at 06:08

Steffen Frank

1,220
7
14

I am sorry I forgot to write return here, in my file return is mentioned it still doesn't work please check it one more time – ABHI SHEK Jun 19 '22 at 06:40

Mirza Umair · Answer 2 · 2022-06-19T08:21:46.010

0

The possibility of getting the undefined value could be many things.

for Example:

maybe, you are getting undefined from props.data. maybe because you are not providing the default value to createContext.

try the following steps these may help you.

You must pass the default value to createContext if needed.

export const ContextforFile = createContext([value it could be any thing like array, string or object etc.]);

when you create a hook you have to write the code something like this.

Your version: const first= useContext(ContextforFile);

recommended version: const useFirst= () => useContext(ContextforFile);

Use this hook something like this.

const first= useFirst()

here you can find the difference: sandbox example

edited Jun 19 '22 at 08:21

answered Jun 19 '22 at 07:30

Mirza Umair

349
1
16

I tried, It is not working thanks for your help – ABHI SHEK Jun 19 '22 at 07:43
did you check your props?? because I can see you are not passing any prop to ContextData. – Mirza Umair Jun 19 '22 at 07:56
try to pass some random text not the direct value of 'rdata' in the value prop. like value={'hello world'}. – Mirza Umair Jun 19 '22 at 08:14
I am able to pass the string values but not prop values any value inside "" are being passed and also i am able to manage the state also but the problem is "props" keyword even though i am storing it in a variable "const rdata" just because the data is from prop i.e props.data it is making it undefined on the consumer page. I have passed props in ContextData in the Exp file --> export function ContextData(props) if that is what you mean – ABHI SHEK Jun 19 '22 at 08:33
you are not passing any prop to ContextData in App.js. just pass a prop then check it. – Mirza Umair Jun 19 '22 at 11:31
tried it, still not working – ABHI SHEK Jun 19 '22 at 15:13
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/245733/discussion-between-abhi-shek-and-mirza-umair). – ABHI SHEK Jun 19 '22 at 15:17

Props value is Undefined while passing through Context API in REACT

2 Answers2