ReactJS pass data to child - reactjs

Question

I have two components BookInfo and AuthorLink. I want to fetch the book info and its author id from server and pass it to AuthorLink to use in componentDidMount to fetch the author name . However, the componentDidMount of AuthorLink run before the componentDidMount of BookInfo so authorid is null when the time it pass to AuthorLink.
How can I fetch the data and the data is ready before I pass it to the child?
var BookInfo = React.createClass({
.
.
.
componentDidMount: function() {
var id = this.props.params.id;
$.ajax({
url: '/api/books/' + id,
dataType: 'json',
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error('#GET Error', status, err.toString());
}.bind(this)
});
},
render: function() {
return (
<AuthorLink authorid={this.state.data.authorid} />
);
}
});
var AuthorLink = React.createClass({
.
.
.
componentDidMount: function() {
$.ajax({
url: '/api/author/' + this.props.authorid,
dataType: 'json',
success: function(data) {
this.setState({authorname:data.authorname});
}.bind(this),
error: function(xhr, status, err) {
console.log('#GET Error', status, err.toString());
}.bind(this)
});
}
},
render: function() {
return (
<a href='#' onClick={this.linkOnClick} >
{this.state.authorname}
</a>
);
}
});

Answer 1

componentDidMount is just ran once per component on the initial render, hence it wont work in this case when we have to wait for the authorID in the BookInfo component.
You would be better off using componentWillReceiveProps in the AuthorLink component to fetch the author data, which is ran before render when, obviously, new props are received in the component. A tip is to also handle the case where the authorname isn't set in the render function, which will most likely be the case on the first render.
More on lifecycle methods her: https://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops

Answer 2

You would have to move the ajax call into componentWillUpdate or componentWillReceiveProps and fire it when this.props.autherid changes (from null to an actual value)
Or you could delay the rendering of <AuthorLink/> itself by checking in the render if this.state.authorname is set:
render: function() {
var content = <div/>;
if(!!this.state.authorname) {
content = <a href='#' onClick={this.linkOnClick} >
{this.state.authorname}
</a>;
return content;
}