John76 John76 - 20 days ago 5
JSON Question

React - Set property of a component from another Component

I am complete noob to react so please bear with me.

I am creating a webpage that has dusting on react components on it. I am not creating the whole page using react and this isn't an option.

What i want I want to do is load a json file and use the data to set the properties of the components on the page. These properties won't be changing once the page has rendered.

I have managed to load the json and set the properties of a component. I also need to reuse some of the properties of this component in other components that are not a children of the first component.

I suppose very basically I need to create a global set of data that can be used by any component on the page. I'm coming from an angular background so maybe this is throwing me off course a bit

Here is what I have so far

var ReleaseList=React.createClass({

getInitialState: function(){
return {
allReleases:[]
}
},
showResults :function(ReleaseData){

this.setState({
allReleases :ReleaseData
});
},

getReleases:function(){
fetch('http://imac.local:5757/s0dj8a.json').then(function(response) {
// Convert to JSON
return response.json();
}).then(function(j) {
var ReleaseData=j.releaseDetail[0]
this.showResults(ReleaseData)
}.bind(this));
},
componentDidMount(){
this.getReleases();
},

render:function(){
return (

<h1>{this.state.allReleases.title}</h1>
)

}
});

var ReleaseDataTitle=React.createClass({
render:function(){
return (
<div>
<h2>{this.props.title}</h2>
// This needs to be the same as this.state.allReleases.title in the previous component

</div>
)
}

});

ReactDOM.render(<ReleaseList/>, document.getElementById('content'));
ReactDOM.render(<ReleaseDataTitle title={'I need this to be the same as this.state.allReleases.title in <ReleaseList />'}/>, document.getElementById('banner'));

Answer

I wouldn't consider React to render small static parts of your website just as I wouldn't use jQuery if I know JS well - it's unnecessary download for such a simple task. I would however consider Preact, a 3kb React clone that was made for these kind of situations: small parts of site / app with similar API.

But here's how I would do it with React (I imagine Preact is very similar).


These properties won't be changing once the page has rendered.

If the data doesn't change, you don't even need to store the data to global variable, just render React components while passing the fetched data as props.

fetch('http://imac.local:5757/s0dj8a.json').then(function(response) {
    return response.json()
}).then(function(data) {

     ReactDOM.render(<First data={data} />, document.getElementById('first'))
     ReactDOM.render(<Second data={data} />, document.getElementById('second'))

     // And any other React component you wish to add to DOM

})

Now the data is available in each of these components as this.props.data. Now you can do whatever you want with this data: format, change, pass to children, render etc.

PS! Me and even React creators recommend to use ES6 classes, especially if you just started ..