Display JSON in table with React

Question

I am new to React and I am trying to display table of data from objects with plan to also have a collapsible detail of the properties for each store but for now I am struggling to display anything other than the first value. Any help appreciated. I looked at many other examples but being a newbie I can't get my head around them so hoping understanding my exact scenario first will allow me figure out more on my own.

Tried return multiple calls with for loop but returns just one element and exits.

import React, { Component } from "react";

class DataStores extends Component {
  state = [

    {
      name:"PODs",
      storeType:"fixed",
      properties: [
        {
          name:"PODNo",
          type: "text",
          regex: ""
        }
    ,
         {
          name:"CustomerCode",
          type: "text",
          regex: ""
        },
        {
          name:"CustomerName", 
          type: "text",
          regex: ""
        },
        {
          name:"RefDate",
          type: "datetime",
          regex: ""
        }]
      }
      ,
      {
        name:"SalesOrders",
        storeType:"variable",
        properties: [
          {
            name:"OrderNo",
            type: "text",
            regex: ""
          }
      ,
          {
            name:"CustomerRef", 
            type: "text",
            regex: ""
          },
          {
            name:"OrderDate",
            type: "datetime",
            regex: ""
          }]
        }


  ];
  ;


  render() {

    console.log('state', this.state);
    for (let store of this.state){
        console.log(store.name);
        let chars = store["properties"]
        console.log(chars);
        for(let i=0, len=chars.length; i < len; i++){
          console.log(chars[i].name)

          // console.log(chars[i].name);
          // console.log(chars[i]["type"]);
        }

    }


  return (
    <table>
    <tbody>{this.state.map((item, key) =>{

             return (
                <tr key = {key}>
                    <td>{item.name}</td>
                    <td>{item.storeType}</td>

                </tr>
              )

           })}</tbody>
     </table>
  )
    // let dataStores = this.state.dataStores.map(store => {
    //     console.log("this the ",Object.keys(store),store.name);      
    //     return (<div><li>{store.name}</li>


    //       </div>
    //     );
    // });
  }
}

export default DataStores;

Answer 1

Here you go, the following approach is much better.

Check it out on sandbox as well: https://codesandbox.io/s/silly-meadow-f6hpz?fontsize=14

import React, { Component } from "react";

class DataStores extends Component {
  state = {
    values: [
      {
        name: "PODs",
        storeType: "fixed",
        properties: [
          {
            name: "PODNo",
            type: "text",
            regex: ""
          },
          {
            name: "CustomerCode",
            type: "text",
            regex: ""
          },
          {
            name: "CustomerName",
            type: "text",
            regex: ""
          },
          {
            name: "RefDate",
            type: "datetime",
            regex: ""
          }
        ]
      },

      {
        name: "SalesOrders",
        storeType: "variable",
        properties: [
          {
            name: "OrderNo",
            type: "text",
            regex: ""
          },
          {
            name: "CustomerRef",
            type: "text",
            regex: ""
          },
          {
            name: "OrderDate",
            type: "datetime",
            regex: ""
          }
        ]
      }
    ]
  };

  render() {
    // console.log('state', this.state);
    // for (let store of this.state){
    //     console.log(store.name);
    //     let chars = store["properties"]
    //     console.log(chars);
    //     for(let i=0, len=chars.length; i < len; i++){
    //       console.log(chars[i].name)

    //       // console.log(chars[i].name);
    //       // console.log(chars[i]["type"]);
    //     }

    // }

    return (
      <table>
        <tbody>
          {this.state.values.map((item, key) => {
            return (
              <tr key={key}>
                <td>{item.name}</td>
                <td>{item.storeType}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    );
    // let dataStores = this.state.dataStores.map(store => {
    //     console.log("this the ",Object.keys(store),store.name);
    //     return (<div><li>{store.name}</li>

    //       </div>
    //     );
    // });
  }
}

export default DataStores;