React how to update another component's state?

Question

I am pretty new to react, trying to make some components work. I have

    ObjectA:React.createClass({
        propTypes: {
           ...

        },

        getInitialState: function() {
            return {
                myState: null
            }
        },

        updateMyState: function(value) {
           this.setState({
               myState: value
           })
        }

        render: function() {
            return (<div className="my-class">'hello' +{this.state.myState}</div>);
          }
    });

    ObjectB:React.createClass({
            propTypes: {
               ...

            },

            render: function() {
                return (<div className="my-class"><ObjectA / >

            </div>);
            }
        });

I'd like to update ObjectA's state from ObjectB. How could I in ObjectB call ObjectA's updateMyState method? Thanks!

@dvine multimedia's anwser is correct, and since react-native is based on react, you may want to take a look at react concepts: facebook.github.io/react/tips/… — YANG Lei
– YANG Lei, Commented Feb 3, 2016 at 8:44

d-vine · Accepted Answer · 2016-02-03 02:33:25Z

23

The basic idea of React is the unidirectional data flow. That means that data is only shared downwards from an ancestor component to its children via the child's properties. We leave Flux like architectures and event emitters out of the equation for this simple example as it's not necessary at all.

The ONLY way then to change a component's state from the outside is changing the props it receives in the parent's render method. so myState would actually live in ObjectB and be given to ObjectA as property. In your example that would look like this:

ObjectA:React.createClass({
    propTypes: {
       ...

    },

    render: function() {
        return (<div className="my-class">'hello' +{ this.props.name }</div>);
      }
});

ObjectB:React.createClass({
    propTypes: {
       ...

    },

    getInitialState: function() {
        return {
            name: null
        }
    },

    onNameChange: function(newName) {
        this.setState({ name: newName })
    },

    render: function() {
        return (
            <div className="my-class">
                <ObjectA name={ this.state.name } />
            </div>
        );
    }
});

answered Feb 3, 2016 at 2:33

d-vine

5,5573 gold badges30 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lucky_start_izumi Over a year ago

Thank you for the detailed answer.

Collectives™ on Stack Overflow

React how to update another component's state?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related