How could I Pass props from grandparent Component to grandson Component - reactjs

Question

I have struggled with the pass props issue for few days but haven't figure out how to achieve this.
In my Project, I have a rechart page index.js and the inherit relationship looks like: index.js => RechartsComponent => LineChartComponent But I can't prop the list from index.js to its grandchild LineChartComponent to replace the data source of SimpleLineChart. I have tried different ways but nothing works. Any advice will be appreciated.
index.js
render() {
const { rechartdata } = this.props
const { list } = rechartdata
return (
<Page inner>
<RadioGroup
options={chartList}
defaultValue="lineChart"
onChange={this.handleRadioGroupChange}
/>
<div className={styles.chart}>
<ReChartsComponent type={this.state.type} list={list} />
</div>
</Page>
)
}
RechartsComponent.js
const ReChartsComponent = ({ type,list}) => {
if (type === 'areaChart') return <AreaChartComponent />
if (type === 'barChart') return <BarChartComponent />
return <LineChartComponent list={list}/>
}
LineChartComponent.js
const SimpleLineChart = ({list}) => (
<Container>
<LineChart
// data={data}
data={list}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<XAxis dataKey="name" />
<YAxis />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip />
<Legend />
<Line
type="monotone"
dataKey="id"
stroke="#8884d8"
activeDot={{
r: 8,
}}
/>
</LineChart>
</Container>
)
const LineChartPage = () => (
<div className="content-inner">
<Button
type="primary"
style={{
position: 'absolute',
right: 0,
top: -48,
}}
>
<a
href="http://recharts.org/#/en-US/examples/TinyBarChart"
target="blank"
>
Show More
</a>
</Button>
<Row gutter={32}>
<Col {...colProps}>
<Card title="Simple Chart">
<SimpleLineChart />
</Card>
</Col>
<Col {...colProps}>
<Card title="DashedLineChart">
<DashedLineChart />
</Card>
</Col>
<Col {...colProps}>
<Card title="CustomizedDotLineChart">
<CustomizedDotLineChart />
</Card>
</Col>
<Col {...colProps}>
<Card title="VerticalLineChart">
<VerticalLineChart />
</Card>
</Col>
</Row>
</div>
)
export default LineChartPage

Answer 1

Reason is simply what you're exporting for LineChartComponent.js is export default LineChartPage
Hence when you define LineChartPage, you need to have prop for that
const LineChartPage = ({list}) => (
...
)
Something good to have but not mandatory is that having the same file name as component will avoid careless mistake like what you've made, such as below
LineChartComponent.js
const LineChartComponent = ({list})=> (
...
)
export default LineChartComponent;
Keep the name of your component and the file name consistent

Answer 2

First off, in your example, the SimpleLineChart isn't receiving a list from LineChartPage. You would need to add a list prop to LineChartPage and pass that into SimpleLineChart
That said, when I need to pass props past more than one level of depth, I generally switch to the Context API.
I would create a context provider for the state you want to pass down:
import { createContext, FC, useReducer } from "react";
// ...
const InitialState : GrandparentStateI = {
// As you wish...
}
export const GrandparentContext = createContext(InitialState);
// ...
grandparentContextReducer = (state : GrandparentStateI, action : {
type : string,
payload : any
})=>{
switch(action.type){
// ...
}
}
export const GrandparentContextProvider : FC<{}> = ({children})=>{
const [state, dispatch] = useReducer(grandparentContextReducer, InitialState);
return (
<GrandparentContext.Provider value={state}>{children}</GrandparentContext.Provider>
)
}
Define a hook which you will use to access the context:
export const useGrandparentContext = () : GrandparentContextProps =>{
const context = useContext(GrandparentContext);
if(!context._inProvider){ // I usually have an _inProvider member
throw new Error("useGrandparentContext must be called within a GrandparentProvider.");
}
return {
...context,
};
}
Wrap the Grandparent's children in the provider;
const Grandparent : FC<{...}> = ({children})=>{
return (
<div>
// ...
<GrandparentContextProvider>{children}</GrandparentContextProvider>
</div>
)
}
Call the hook from the grandchildren at whatever depth:
const Grandchild : FC<{...}> = ()=>{
const {
...
} = useGrandparentContext();
return (
// ...
)
}
The Context API generally makes refactoring or adding layers of depth much easier than other patterns.