Objects are not valid in React

Question

This is my app.js

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, IndexRoute, browserHistory } from 'react-router'

const App = ({ children }) => (
  <div>
    {children}
  </div>
)

import Index from './index'
import Weatherhbh from './weatherhbh'

render((
  <Router history={browserHistory}>
    <Route path="widget/" component={App}>
      <IndexRoute component={Index}/>
      <Route path="hbh/" component={Weatherhbh}/>
    </Route>
  </Router>
), document.getElementById('app'))

and this is my hbh component

import React from 'react'
import axios from 'axios'

const urlP=`/hourly`;

export default class App extends React.Component {
  constructor(props){
      super(props);
      this.state={
        data:[]
        };
    }
     componentDidMount() {
       axios.get(urlP)
              .then(response => {
                console.log(response.data,"this is response")
                this.setState({
                 data:response                 
                });
            });
        }


  render() {
    return( <div>

          <p>{this.state.data}</p>

   </div>
   )
  }
}

and I get this error

bundle.js:1244 Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of App.(…)

how can I fix it so I can display all data which comes from the backend?

Yeah so you are setting a json object in your state for data right ? You cannot render an object directly in react, you have to do some processing on it. What information in the data do you want to display ? — Maël Lavault

kimobrian254 kimobrian254 · Accepted Answer · 2017-02-16T10:48:41

this.setState({
    data:response                 
});

This section of code here assigns response(an object) to state variable data then:

  <p>{this.state.data}</p>

tries too render the object but react doesn't know how to render objects. To get your data use:

<p>{this.state.data.data}</p>

since now data=response and the axios response has a property called data which holds the actual data. And if by any chance the data is also an object(json data), you will have to access the specific key e.g

this.state.data.data.username

Objects are not valid in React

1 Answers