React callBack function not able to get props values inside it

43 Views Asked by At

I've a React table component, which has an accordion attached to it

const ParentComponent = ({
megaDataFromAPIresponse1, megaDataFromAPIresponse2, someStaticProp1, someStaticProp2
});

console.log("megaDataFromAPIresponse1", megaDataFromAPIresponse1);
// prints value of megaDataFromAPIresponse1 properly.

const Temp=(props)=>{
 console.log("props", props); //prints props that SpecialTable returns

 console.log("megaDataFromAPIresponse1", megaDataFromAPIresponse1); 
 //expected to print megaDataFromAPIresponse1 from parentComponent. 
 //But prints null
 //same with megaDataFromAPIresponse2. Prints null

 console.log("someStaticProp1", someStaticProp1); // prints staticProp1 value

}

return <SpecialTable {...props} Accordion={Temp} />


here the Accordion gives back a callBack function which contains some props.

From above snippet you can see that Temp function is not able to access the outer variables. Can you please help me understand why?

Also, I tried to set a state variable inside the Temp when it is called, and that state is being looked upon inside dependencies of a useEffect and do an action. But setting that state on Temp call is throwing me an infinite loop - Not sure why?

Thanks in advance

0

There are 0 best solutions below