reactjs - Pass Data to React Component dynamically -

i developing custom component in reactjs able display tree based on 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, component able render because sending json static data.js file shown below:

import react 'react'; import treecomponent 'reusable-components/treecomponent'; import hierarchyjson './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 want achieve have same functionality within web pages, receiving json data http call.

i beginner in reactjs, i'm lost @ moment.

your tree component not need worry data coming from, rather s worried there data. in other words, whether data local file or ajax request api should not concern of tree component. need to make sure data requires gets sent down it. here example of mean.

class sample extends react.component {     constructor() {         this.state = {             mydata: {} //this tree          }     }      componentdidmount() {         ajax.request(some end point).then(data => {             this.setstate({mydata: data});         })         //this recomended make async calls. when promise resolves          //the component render again due setstate being called         //and time mydata data api         //and tree component has needs render data     }      render() {         <tree data={mydata} /> //     } }