how to use setProps in react.js

Question

I want to call setProps from outside of myComponent to be able to dynamically change data for myComponent.
I expect that after changing props of the component, it will re-render itself.

I was trying the following:

var myComponent = React.createClass({
  render: function () {
    return (
      React.DOM.div(null, this.props.data)
    );
  }
});

React.renderComponent(
  myComponent({ data: someData }),
  document.getElementById('predictionContent')
);

myComponent.setProps({data: someData2});

The problem is that I don't understand how to use setProps for the component. In my case, I receive "undefined" error.

How to solve this?

possible duplicate of [Pass new server data to react.js components](http://stackoverflow.com/questions/20605309/pass-new-server-data-to-react-js-components) — Brigand, Aug 05 '14 at 20:06
Side note: myComponent is the component class. The only place setProps works is on a component instance, which you can only get either with `this` inside one of the component's methods or with `this.refs` from the component rendering it. — Brigand, Aug 05 '14 at 20:11

score 25 · Accepted Answer · edited Dec 04 '15 at 23:46

warning: setProps is now deprecated.

React.createClass returns a class, it is React.renderComponent which returns an instance of the class which has the setProps method.

Try this instead:

var MyComponent = React.createClass({
    render: function () {
        return React.DOM.div(null, this.props.data);
    }
});

var myComponent = React.renderComponent(
     new MyComponent({ data: someData }),
     document.getElementById('predictionContent')
);

myComponent.setProps({ data: someData2 });

Having said that, Chad Scira's answer is also correct: probably better to re-render than to call setProps. That will keep it looking the same as the code inside the render() method, and you'll always be able to call renderComponent, regardless of whether it is the first time or a subsequent update.

Like this:

var MyComponent = React.createClass({
    render: function () {
        return React.DOM.div(null, this.props.data);
    }
});

React.renderComponent(
     new MyComponent({ data: someData }),
     document.getElementById('predictionContent')
);

// later
React.renderComponent(
     new MyComponent({ data: someData2 }),
     document.getElementById('predictionContent')
);

Kudos for suggesting the component re-render. This helped me out a ton. — Adam, Aug 15 '16 at 03:02

score 10 · Answer 2 · edited Jul 26 '15 at 14:01

10

You're not supposed to do that. Instead just run the renderComponent method again like this:

React.renderComponent(
     myComponent({ data: someData2 }),
     document.getElementById('predictionContent')
);

react will automatically resolve the differences

edited Jul 26 '15 at 14:01

knowbody

8,106
6
45
70

answered Aug 05 '14 at 13:15

Chad Cache

9,668
3
56
48

Then why do we have setProps function if it is not possible to change props from outside of the component? – 31415926 Aug 05 '14 at 13:20
2

@31415926 see [the setProps docs](http://facebook.github.io/react/docs/component-api.html#setprops); they try to discourage it (for good reason). It's mostly a relic of early react versions. – Brigand Aug 05 '14 at 20:09

how to use setProps in react.js

2 Answers2

Linked