Kirill Stas Kirill Stas - 1 month ago 9
React JSX Question

Multiple states in setState in React

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 ?

Answer

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>