Nested array of objects in a React table

Question

I have the following data structure that I am trying to render in a table in React. However I keep getting a undefined issue getting the 'errors' nested array.

My data is the following:

const messages= [
  { invoice: "81", errors: [{ Message: "Invoice # must be unique." }] },
  { invoice: "82", errors: [{ Message: "Invoice # must be unique." },
                            { Message: "No total amount." }]},
  { invoice: "85", errors: [{ Message: "Invoice # must be unique." }] }
 ];

My React table is the following:

 <table>
  <thead>
   <tr>
    <th>Invoice</th>
    <th>Errors</th>
   </tr>
  </thead>
   {messages.map(e => {
    return (
     <tbody>
      <tr>
       <td>{e.invoice}</td>
        {messages.errors.map(e => {
         return (
          <td>
           <ul>{e.errors}</ul>
          </td>
          );
       })}
      </tr>
     </tbody>
     );
    })}
 </table>

My table is rendered and e.invoice is displaying corrrectly, however I am getting a "cannot map errors of undefined" error.

Aayush Mall · Accepted Answer · 2019-05-07 19:48:40Z

1

Its because your messages is not a javascript object, rather it's an array

You need to use

{e.errors.map(item => {
     return (
      <td>
       <ul>{item.Message}</ul>
      </td>
      );
})}

answered May 7, 2019 at 19:48

Aayush Mall

1,01310 silver badges21 bronze badges

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

1 Comment

Jim Dover Over a year ago

Thanks! Worked perfectly!

Josh · Accepted Answer · 2019-05-07 19:45:16Z

1

{e.errors.map(error => { is the correct chain.

answered May 7, 2019 at 19:45

Josh

1,47419 silver badges34 bronze badges

1 Comment

Jim Dover Over a year ago

Thanks! Worked perfectly!

Collectives™ on Stack Overflow

Nested array of objects in a React table

My data is the following:

My React table is the following:

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My data is the following:

My React table is the following:

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related