How to display json data with ReactJs as table

Question

I would like to display my json data with reactJs in the table, but I can\'t.

[
  {
    \"userId\": 1,
    \"id\": 1,
    \"title\": \"sunt aut facere repell         


        

Answer 1

You can use map to iterate over your JSON data

class App extends React.Component {
  constructor(){
    super() 
      this.state = {
        data: []
      }
    
  }
  componentDidMount() {
    $.ajax({
       url: "http://jsonplaceholder.typicode.com/posts",
       type: "GET",
       dataType: 'json',
       ContentType: 'application/json',
       success: function(data) {
         
         this.setState({data: data});
       }.bind(this),
       error: function(jqXHR) {
         console.log(jqXHR);
       }.bind(this)
    })
  }
  render() {
    
        
    return (
      {this.state.data.map(function(item, key) {
             
               return (
                  
                )
             
             })}

      

                      
{item.userId}
                      
{item.id}
                      
{item.title}
                      
{item.body}
                  
       
    )
  }
}

ReactDOM.render(, document.getElementById('app'))