React Transfer internal prop of Parent to Child - reactjs

Question

<Parent><!-- has an internal prop 'json', is set from a fetch request -->
<div>
<div>
<Child /><!-- how can I send 'json here? -->
Do I have to use React context? I find it very confusing. After writing a component like that and looking back at the code I am just confused https://reactjs.org/docs/context.html

Answer 1

https://codesandbox.io/embed/bold-bardeen-4n66r?fontsize=14
Have a look at the code, context is not that necessary you can elevate data to parent component, update it and share it from there only.

Answer 2

For what I know, there are 3 or 4 alternatives:
1) Using context as you said, so declaring a provider and then consuming it with useContext() at the component where you need it. It may reduce reusability of components,
2) Lift state & props, among descendant components
const App = (props: any) => {
// Do some stuff here
return <Parent myProp={props.myProp}></Parent>;
};
const Parent = ({ myProp }: any) => {
return (
<div>
<Child myProp={myProp}></Child>
</div>
);
};
const Child = ({ myProp }: any) => {
return (
<div>
<GrandChild myProp={myProp}></GrandChild>{" "}
</div>
);
};
const GrandChild = ({ myProp }: any) => {
return <div>The child using myProp</div>;
};
export default App;
3) Using children:
const App = (props: any) => {
// Do some stuff here
return (
<Parent>
<GrandChild myProp={props.myProp}></GrandChild>
</Parent>
);
};
const Parent = (props: any) => {
return (
<div>
<Child>{props.children}</Child>
</div>
);
};
const Child = (props: any) => {
return <div>{props.children}</div>;
};
const GrandChild = ({ myProp }: any) => {
return <div>The child using myProp</div>;
};
4) Pass the GrandChild itself as a prop in the Parent, lifting it down to the proper Child and render it there. It's actually a mix of the previous 2 alternatives.

Answer 3

This is a simple example where you send the response through props to child. I used some sample (api) to demonstrate it.
------------------------Parent Component------------------------
import React, { Component } from "react";
import Axios from "axios";
import Child from "./Child";
let clicked = false;
class App extends Component {
state = {
parentResponse: ""
};
fetchAPI = () => {
Axios.get("https://jsonplaceholder.typicode.com/todos/1")
.then(res => {
if (res && res.data) {
console.log("Res data: ", res.data);
this.setState({ parentResponse: res.data });
}
})
.catch(err => {
console.log("Failed to fetch response.");
});
};
componentDidMount() {
this.fetchAPI();
}
render() {
return (
<div>
<Child parentResponse={this.state.parentResponse} />
</div>
);
}
}
export default App;
------------------------Child Component------------------------
import React, { Component } from "react";
class Child extends Component {
state = {};
render() {
return (
<div>
{this.props.parentResponse !== "" ? (
<div>{this.props.parentResponse.title}</div>
) : (
<div />
)}
</div>
);
}
}
export default Child;