react js displaying ajax data on function call by passing parameter - reactjs

Question

I am currently trying to learn react by building a simple app that works with a JSON array by calling a certain API. I would then like to show the results of the array in a list item and when click one of the list-item and then it returns a parameter and call an api and display data in other part of the page.
I have successfully called the API and am showing the correct data in the list-item but I am struggling to figure out how to show the data after the click in another part of the page.
So I currently have this in my page:
<div class="col-lg-3 col-md-3">
<div class="block-job-list" id="JobCardBlock"></div>
</div>
<div class="col-lg-9 col-md-9">
<div class="block-job-list" id="JobDetailBlock"></div>
</div>
<script type="text/jsx">
var JobCard = React.createClass({
// get game info
loadGameData: function() {
document.getElementById("overlay").style.display = "block";
var a_token = window.localStorage.getItem('access_token');
$.ajax({
type: 'GET',
url: this.props.source,
data: {
page: 1,
},
dataType: "json",
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", "Bearer " + a_token);
},
success: function(data) {
$('#overlay').hide();
this.setState({
data: data.order_list.data
});
}.bind(this),
error: function(xhr, status, err) {
$('#overlay').hide();
console.error('#GET Error', status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {
data: []
}
},
componentDidMount: function() {
this.loadGameData();
},
render: function() {
return ( < div className = "CurrentGame" >
< JobList data = {
this.state.data
}
/> < /div>
);
}
});
var JobList = React.createClass({
displayData: function(e) {
var a_token = window.localStorage.getItem('access_token');
$.ajax({
type: 'POST',
url: 'http://zipship-beta.herokuapp.com/job_detail',
data: {
order_id: e,
},
dataType: "json",
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", "Bearer " + a_token);
},
success: function(data) {
$('#overlay').hide();
this.setState({
data: data.order_list
});
console.log(this.state.data);
}.bind(this),
error: function(xhr, status, err) {
$('#overlay').hide();
console.error('#GET Error', status, err.toString());
}.bind(this)
});
},
render: function() {
if (!this.props.data) {
return null;
}
return (
<ul className="list-group">
{
this.props.data.map(function(jobDetail, i) {
return <li className="list-group-item" key=jobDetail.id} onClick={()=>{this.displayData(jobDetail.id)}}>
</div>
</li>
},this)
}
</ul>
);
}
});
</script>

Answer 1

If you are looking to make actions of job list change the state of job card here are two options you might consider.
The easiest of which is to create a parent react class such as JobInfo which simply acts as a container for both these elements.
render: function() {
<div>
<JobCard/>
<JobList/>
</div>
}
Then JobInfo would maintain state for both of these two objects. In React when you find ways to reduce state its always a good sign. Then the JobInfo object would have some function such as onListItemClick or updateJobCard. Since you are using your ajax request to update the state, it would be move up to this parent class since the state lives here. Then you simply pass this function down (as a prop) to the JobList object and use this for your onClick event on your list items. Now since the state of the parent is changed from the onClick event the state change will propagate down to both the JobList and JobCard info.
The other option you can look into is having an external event handler. These kind of methods are what you find in Flux structures. The idea use you JQuery or some event library to have your JobList object Trigger an event globally, and have your JobCard object subscribed to this event.
The second option I would recommend against. For most simple cases its completely unnecessary and to implement this type of system.
TLDR; Centralize your state and pass state altering functions as props.