React - how to update children on AJAX load

Question

The example here - https://facebook.github.io/react/tips/initial-ajax.html - is modified below.

this.state.username is "placeholder" on load and is passed to <UserGist />

After AJAX loads this.state.username is changed to "octocat", but...

How come this is not passed down to the <UserGist /> component?

var UserGist = React.createClass({

    getInitialState: function() {
        return {
            username: this.props.username
        };
    },

    render: function() {
        return (
            <div>
                {this.state.username}
            </div>
        );
    }

});

var App = React.createClass({

    getInitialState: function() {
        return {
            username: 'placeholder'
        };
    },

    componentDidMount: function() {
        this.serverRequest = $.get(this.props.source, function (result) {
            var lastGist = result[0];
            this.setState({
                username: lastGist.owner.login
            });
        }.bind(this));
    },

    componentWillUnmount: function() {
        this.serverRequest.abort();
    },

    render: function() {
        return (
            <div>
                <UserGist username={this.state.username} />
            </div>
        );
    }

});

ReactDOM.render(
    <App source="https://api.github.com/users/octocat/gists" />,
    document.getElementById('main')
);

What do you get in the console? Have you tried debugging? – U r s u s Jun 14 '16 at 09:04 — U r s u s, Jun 14 '16 at 09:04

score 2 · Accepted Answer · answered Jun 14 '16 at 09:04

You are passing the new username to your child component, but you are not updating your child state.

If you want to update your child state when the component receives new props, you should implement it.

UserGist component.

componentWillReceiveProps: function(nextProps){
       this.setState({username: nextProps.username});
}

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

You should access the value via props in your UserGist component as it is getting passed in as a prop:

var UserGist = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.username}
      </div>
    );
  }
});

Which can then be represented as a stateless functional component (if you are using React > 0.14):

function UserGist(props) {
  return <div>{props.username}</div>
}

It's not necessary to convert it into state unless you are going to be doing some sort of mutation to it within the component itself. It's best to try and use props as far as you can and minimise state.

Some further reading:

state vs props: What is the difference between state and props in React?
Stateless Functional Components

edited May 23 '17 at 12:16

Community

1
1

answered Jun 14 '16 at 09:07

ctrlplusb

12,847
6
55
57

2

In this case UserGist would be a stateless component – Michael Rasoahaingo Jun 14 '16 at 09:32
Yep, I'll update with an example of that to be clear. Thanks – ctrlplusb Jun 14 '16 at 09:34

React - how to update children on AJAX load

2 Answers2