CODEWITHSUNDEEP
javascriptreactjs
Manav
Manav

Reputation: 669

Display JSON output using react

import React from 'react'
import ReactDOM from 'react-dom'
import axios from 'axios'

class ToDoList extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      lists: []
    }
  }

  componentDidMount() {
    axios.get('http://localhost:3001/api/v1/lists.json')
    .then(response => {
      console.log(response.data);
      this.setState({lists: response.data})
    })
  }

  render() {
    return(
      <div>
        {this.state.lists.map((list) => {
          return(
            <div key={list.id}>
              <h1>{list}</h1>
            </div>
          )
        })}
      </div>
    )
  }
}

ReactDOM.render(<ToDoList/>, document.getElementById('root'))

I am making simple to do app in react just wanted to display the json output, however getting this error Objects are not valid as a React child, please if someone can put me on right track

Upvotes: 0

Views: 18394

Answers (4)

Khadim H.
Khadim H.

Reputation: 645

  • After http://localhost:3001/ you type your directory of JSON file: Mydata.json is my JSON file name, you type your file name: Don't forget to import axios on the top. *

componentDidMount() {
    axios.get('http://localhost:3001/../static/data/Mydata.json')
      .then(response => {
      console.log(response.data)
      this.setState({lists: response.data})
    })
 }

Upvotes: 0

birendra
birendra

Reputation: 144

You are directly showing a JSON Object. Before showing the list you have to convert it from an object to a string.

import React from 'react'
import ReactDOM from 'react-dom'
import axios from 'axios'

class ToDoList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      lists: []
    }
  }
  componentDidMount() {
    axios.get('http://localhost:3001/api/v1/lists.json')
      .then(response => {
      console.log(response.data);
      this.setState({lists: response.data})
    })
  }
  render() {
    return(
      <div>
        {this.state.lists.map((list) => {
          return(
            <div key={list.id}>
              <pre>
                <h1>{JSON.stringify(list)}</h1>
              </pre>
            </div>
          )
        })}
      </div>
    )
  }

}

Upvotes: 0

Jordan Running
Jordan Running

Reputation: 106027

You "just wanted to display the json output," but you don't have any JSON. JSON is a data serialization format; Axios deserializes the JSON it gets from the server and gives you the result, which in this case is an array of objects.

Since React has no idea how to render a plain object, you can't just stick it in your JSX and expect it to work. You need to turn it into something React knows how to render. In the simplest case, that's a string, so use JSON.stringify to turn it back into a JSON string. For debugging purposes it might be helpful to make it indented by passing a number of spaces as the third argument, and wrap it in a <pre> tag. You can see this in action below.

class ToDoList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      lists: [ { id: 1, name: "foo" }, { id: 2, name: "bar" } ],
    };
  }

  render() {
    return (
      <div>
        {this.state.lists.map(list => ( 
          <div key={list.id}>
            <pre>{
              JSON.stringify(list, null, 2)
            }</pre>
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<ToDoList/>, document.querySelector('div'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div></div>

Upvotes: 2

Manav
Manav

Reputation: 669

render() {
    return (
      <div>
        <div>
            New Idea
        </div>
        {this.state.lists.map((x) => {
            return (<div>
              <p>List: {x.job_name}, Status: {x.status} , Created On: {x.created_at}</p>
            </div>)
        })}
      </div>
    );
  }

Thanks to everyone, As per @chazsolo suggestion it was actually to do with the return.

Upvotes: 0

Related Questions