Pass Data to React Component dynamically - reactjs

Question

I am currently developing a custom component in ReactJS that is able to display a tree based on a JSON:
export default {
name: 'Main Node', nodeid: 99,toggled: true,
children: [
{ name: 'Secondary Node',nodeid: 0,
chosen: false,pushed: false,toggled: false,
children: [
{ name: 'Leaf Node',nodeid: 1,chosen: false,
pushed: false, toggled: false,
children: [{
name : "child 1", pushed: false,
toggled: false, chosen:false
}]
}
]
}
]
};
Currently, the component is able to render itself because I am sending the JSON from a static Data.js file as shown below:
import React from 'react';
import TreeComponent from 'reusable-components/TreeComponent';
import HierarchyJson from './internal/Data';
export default function ExampleTreeComponent() {
return <TreeComponent hierarchyJson={HierarchyJson} functionMode={4} htmlId="tree1"
pushLabelValue="include SubLevel"
unpushAlertText="plz choose something"
pushAlertText="plz choose something" />
}
What I want to achieve is to have the same functionality within my web pages, but receiving the JSON data from an HTTP call.
I am a beginner in ReactJS, so I'm lost at the moment.

Answer 1

Your tree component does not need to worry about where the data is coming from, rather it s only worried that there is data. In other words, whether you get the data from some local file or from an ajax request to an api should not be the concern of the tree component. All you need to to is make sure that the data that it requires gets sent down to it. Here is an example of what I mean.
class sample extends React.Component {
constructor() {
this.state = {
myData: {} //this is the tree
}
}
componentDidMount() {
ajax.request(some end point).then(data => {
this.setState({myData: data});
})
//this is where its recomended to make async calls. When the promise resolves
//the component will render again due to setState being called
//and this time myData will be your data from the api
//and now the tree component has what it needs to render the data
}
render() {
<Tree data={myData} /> //
}
}