React: axios.get and promises - reactjs

Question

I wrote the following code to use axios inside getInitialState:
var Player = createReactClass({
readDataFromServer: function() {
return axios.get("**** url address ****")
.then(res => {
return {name: res[name]}
});
},
render: function() {
return this.readDataFromServer().then((res) => {
return (<input value={res.name} type="text"/>)
}
}
}
I'd expect that I'll get an input with text inside. 'render' function returns a only when the promise is resolved, and then it returns
But, still, I just get an error saying:
Player.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
By the way, if I change readDataFromServer function to:
readDataFromServer: function() {
return {name: 'John'}
}
I get an input box with the text 'John' inside.

Answer 1

You would probably have to use react-redux for these async axios calls. When you initiate the app, your getInitialState function doesn't have a return value, so when it first renders it to the DOM, it has an empty value. If you are to console.log the returned value, you will probably see it in the console, however, since the value was null when you first render it, it does not display the returned value. Look into react-redux, where it manages your datastore, once you get the returned value from the axios call, update the redux value, and render the redux value in your
render: function() {
return (<input value={this.redux.name} type="text"/>)
}
call instead, and it will update the DOM automatically once it receives the response form the server.
Feel free to look at the boilerplate for React and Express application as an example: https://github.com/rjzheng/REWBoilerplate.git. Look inside the /app folder and see how reducers are set up.