Display JSON output using react

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>

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.

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>
    )
  }

}

• 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})
    })
 }