how to nested loop with many state variables into a table?

Question

How to list many variables into a table,
like for loop i,j,k

this.state = {

            materials: ['m1', 'm2'],
            quantity: ['2', '4'],
            unitPrice : ['12', '15'],
            detailtotal: ['0', '1'],
        };

and listing:

<Table>
    <thead>
        <th>Material</th>
        <th>Quantity</th>
        <th>Unit Price</th>
        <th>total</th>
    </thead>
    <tbody>
    {this.state.materials.map( obj => {return(
        <tr>
            <td >{obj.materials}</td>
            <td>{obj.quantity}</td>
            <td>{obj.unitPrice}</td>
            <td>{obj.detailtotal}</td>
        </tr>
    )})}
    </tbody>
</Table>

the expected result as

material qty unitprice total
_____________________________
m1 2 12 0
m2 4 15 1

aunsal · Accepted Answer · 2019-05-01 13:15:50Z

If you refer here you will see that the Array.prototype.map() method gives you an index for the current element. So all you have to do is: (but this assumes that the data in all the arrays is in the same order)

{this.state.materials.map((obj, index) => (
    <tr>
        <td >{obj.materials[index]}</td>
        <td>{obj.quantity[index]}</td>
        <td>{obj.unitPrice[index]}</td>
        <td>{obj.detailtotal[index]}</td>
    </tr>
))}

A better approach would be to save the associated data together in a single object like so:

this.state = {
  materials: [
    {
      material: 'm1',
      quantity: 2,
      unitPrice: 12,
      total: 0
    },
    {
      material: 'm2',
      quantity: 4,
      unitPrice: 15,
      total: 1
    }
  ]
}

Then you can call them like this:

    {this.state.materials.map(obj => (
        <tr>
            <td >{obj.material}</td>
            <td>{obj.quantity}</td>
            <td>{obj.unitPrice}</td>
            <td>{obj.total}</td>
        </tr>
    ))}

Hien Nguyen · Accepted Answer · 2019-05-01 13:18:38Z

You can convert your state to this array and use in your HTML

let state = {

            materials: ['m1', 'm2'],
            quantity: ['2', '4'],
            unitPrice : ['12', '15'],
            detailtotal: ['0', '1'],
   };

    values =    Object.values(state);
    result = [];
    for(i =0; i < values[0].length; i++){
       item = { materials: values[0][i], quantity: values[1][i], unitPrice: values[2][i], detailtotal: values[3][i]}
       result.push(item);
    }

    console.log(result)

let state = {
       materials: ['m1', 'm2'],
       quantity: ['2', '4'],
       unitPrice : ['12', '15'],
       detailtotal: ['0', '1'],
};
        
values =    Object.values(state);
result = [];

for(i =0; i < values[0].length; i++){
   item = { materials: values[0][i], quantity: values[1][i], unitPrice: values[2][i], detailtotal: values[3][i]}
       result.push(item);
}
    
console.log(result)

Collectives™ on Stack Overflow

how to nested loop with many state variables into a table?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related