How to fill in a table in react with an array of objects?

Question

I have a pretty simple question, but couldnt deal with it yet. The first code works, while the second just give me empty table cells. What is the reason for that and how can I put data into table without assigning to anything?

const prods = [
    {id: 1, name: 'product1', cost: 100},
    {id: 2, name: 'product2', cost: 200},
    {id: 3, name: 'product3', cost: 300},
];

function App() {
    const rows = prods.map(function(item) {
        return <tr key={item.id}>
            <td>{item.name}</td>
            <td>{item.cost}</td>
        </tr>;
    });
    
    return <table>
        <tbody>
            {rows}
        </tbody>
    </table>;
}

const prods = [
    {id: 1, name: 'product1', cost: 100},
    {id: 2, name: 'product2', cost: 200},
    {id: 3, name: 'product3', cost: 300},
];

function App() {
    
    return <table>
        <tbody>
        <tr key={prods.id}>
            <td>{prods.name}</td>
            <td>{prods.cost}</td>
        </tr>;
        </tbody>
    </table>;
}

prods is an array, prods.id, prods.name, etc... are all undefined since those properties do not exist on type Array . — Cesare Polonara
– Cesare Polonara, Commented Apr 14, 2022 at 17:16

Amr · Accepted Answer · 2022-04-14 17:49:17Z

1

you are trying to access a property value of an object inside an array of object with out iterating it's items, which will result undefined. In your case, you need to map over your array of objects using the Map method, please refer to this url so you can get to know more about rendering multiple components using the map method in React.

answered Apr 14, 2022 at 17:49

Amr

7511 gold badge7 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Liki Crus · Accepted Answer · 2022-04-14 17:16:13Z

0

You will see an empty row which may be invisible. But you can check it in browser dev tool.

Why? It's simple. You have not printed at all.

prods is an array. But in your render method (return <table> ...), you printed prods.name which is undefined.

So please change to see a row.

<td>prods[0].name</td>
...

Correct one is following:

function App() {

  return <table>
    <tbody>
    {prods.map(prod) => <tr key={prod.id}>
      <td>{prod.name}</td>
      <td>{prod.cost}</td>
      </tr>}
    </tbody>
  </table>;
}

answered Apr 14, 2022 at 17:16

Liki Crus

2,0825 gold badges20 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to fill in a table in react with an array of objects?

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