How To Display An Array Of Objects In A Table In React

I have recently been learning react. I set my state to an array of objects. I want to display that array in a table on the page (each object on one line). I have been researching m

Solution 1:

We don't know what your array of objects look like so we have to guess:

So I guess this input:

const initState = [
    { id: 1, name: "bread", quantitiy: 50 },
    { id: 2, name: "milk", quantitiy: 20 },
    { id: 3, name: "water", quantitiy: 10 }
  ];

And I get this output:

It's completely flexible so if we have input:

const initState = [
    { id: 1, name: "bread", quantitiy: 50, location: "cupboard" },
    { id: 2, name: "milk", quantitiy: 20, location: "fridge" },
    { id: 3, name: "water", quantitiy: 10, location: "fridge" }
  ];

Then we get this output:

The most important thing is to map over the object values inside the map which maps over the state array:

{state.map((item) => (
        <trkey={item.id}>
          {Object.values(item).map((val) => (
            <td>{val}</td>
          ))}
        </tr>
      ))}

full demo below and on codePen: https://codepen.io/Alexander9111/pen/zYvEbML

I used a functional component but it would be very similar with a class-based component.

NOTE: you could also create a row component and then call that component inside the map over the state array. Inside this row component, you would map of the Object keys like I did and output table data elements. It's a balance between death by component (i.e. breaking down everything into smaller and smaller components nested inside each other) and fewer components which are too complex.

functionMyTable() {
  const initState = [
    { id: 1, name: "bread", quantitiy: 50, location: "cupboard" },
    { id: 2, name: "milk", quantitiy: 20, location: "fridge" },
    { id: 3, name: "water", quantitiy: 10, location: "fridge" }
  ];
  const [state, setState] = React.useState(initState);

  return (
    <table><trkey={"header"}>
        {Object.keys(state[0]).map((key) => (
          <th>{key}</th>
        ))}
      </tr>
      {state.map((item) => (
        <trkey={item.id}>
          {Object.values(item).map((val) => (
            <td>{val}</td>
          ))}
        </tr>
      ))}
    </table>
  );
}

ReactDOM.render(<MyTable />, document.getElementById("target"));

th,
td {
  border: 1px solid black;
  margin: 0px0px;
  padding: 5px5px;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script><divid="target"></div>

Solution 2:

item is an object from the array. So this object will have key(s) and value(s). You need to retrive those and show

For example suppose array is like

orderDetails=[{
  OrderID:1,
  CustomerID:'someName'
}]

Then in map you need to do

<table>
  {this.state.orderDetails.map((item =><trkey={item.OrderID}>{item.CustomerID}</tr>
  ))}
</table>

Solution 3:

You can do like this,

 <table>
  {this.state.orderDetails.map((item =><tr><tdkey={item.OrderID}>{item.UnitPrice}</td></tr>
  ))}
</table>

Solution 4:

Objects are not valid as a React child

It means that you passed an Object instead of something that React can deserialize; string for example, or a number.

First of all, you have to pass to key={} something that is unique (not an array index). itemID would be nice.