How can I pass multiple states to setState? Here's an example:

getInitialState: function() {
  return {
    list: [],
    newFilm: {},
    searchWord: '',
    searchDetails: {}
  }
},

componentDidMount: function() {
  this.setState({
    searchDetails:someData,
    newFilm: 'I am first text',
  })
}

The question is:

Is the example syntactically correct ?

How can I pass multiple states to setState? Here's an example:

getInitialState: function() {
  return {
    list: [],
    newFilm: {},
    searchWord: '',
    searchDetails: {}
  }
},

componentDidMount: function() {
  this.setState({
    searchDetails:someData,
    newFilm: 'I am first text',
  })
}

The question is:

Is the example syntactically correct ?

• javascript
• reactjs

• 5 That would be how you do it. – Kelly J Andrews Commented Oct 25, 2016 at 21:23
• Please review this: stackoverflow.com/questions/24898012/… – Piotr Berebecki Commented Oct 25, 2016 at 21:27
• Sorry Piotr, but how this can help me ? – Kirill Stas Commented Oct 25, 2016 at 21:32
• I made an edit to the question, but that was a loose interpretation of what I think you meant to ask. It is still unclear though what is the problem with the current code that you posted. Is it not working correctly? Why? Is there an error? What's the current issue that you are facing? – Tunaki Commented Oct 25, 2016 at 21:35

1 Answer 1

There is no syntax problem with the way you are setting state, but there could be a problem with the way you are initialising you state. You have initialized newFilm as an object state but when you set its state you are giving a string. So suppose you try to render it like {this.state.newFilm} it will throw you an error

Objects are not valid as a React child (found: object with keys {}).

as you can see in the snippet below, since the first time the component is rendered it sees an object where later its only a string.

To fix this try initializing you state newFilm as '' or take prevention when you try to render i.e. check where it contains some data and then only render.

Also I don't see someData defined in your componentDidMount function. You need to define it before you can use it.

var App = React.createClass({
  getInitialState: function() {
  return {
    list: [],
    newFilm: {},
    searchWord: '',
    searchDetails: {}
  }
},

componentDidMount: function() {
  var someData = {'name': 'abc'};
  this.setState({
    searchDetails:someData,
    newFilm: 'I am first text',
  })
},
render: function() {
  console.log(this.state.newFilm);
  return (
    <div>{this.state.newFilm}</div>
  )
}
})

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<div id="app"></div>