How to map an array that is nested within arrays into a table form?

Question

Am trying to display my data in a table form (Headers: key1 and key2). This is my code:

render() {
        console.log((this.state.message)); 
        const datamapping = Object.entries(this.state.message);
        console.log(datamapping);
        return (
            <div>
                <div className="viewall">
                    {datamapping.map((data, key) => {
                        return (
                            <div key={key}>
                                <p>{data.key1}</p>
                            </div>
                        );
                    })}
                </div>
            </div>
        );
    }

console.log(this.state.message) returns the following: {Items: Array(4), Count: 4, ScannedCount: 4}

In "Items":

Items: Array(4)
0: {key1: "value", key2: "value"}
1: {key1: "value", key2: "value"}
2: {key1: "value", key2: "value"}
3: {key1: "value", key2: "value"}

How should I go about being able to display the "values" in a table format? Currently, {data.key1} does not return any value.

Alija Fajic · Accepted Answer · 2021-09-30 07:56:39Z

2

Add ? after datamapping

{datamapping?.map((data, key) => {
    return (
      <div key={key}>
         <p>{data.key1}</p>
      </div>
   );
  })}

answered Sep 30, 2021 at 7:56

Alija Fajic

5987 silver badges18 bronze badges

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

1 Comment

Audrey Wong Over a year ago

Hi sorry, it doesn't work. I still have a delay in the data resulting in the error

Anirudh Kanukanti · Accepted Answer · 2021-09-30 07:06:57Z

1

Use map for this.state.message.Items as Items is already an Array

this.state.message.Items.map()

answered Sep 30, 2021 at 7:06

Anirudh Kanukanti

3181 silver badge3 bronze badges

3 Comments

Audrey Wong Over a year ago

I got this error: Cannot read property 'map' of undefined

Audrey Wong Over a year ago

I suspect that might be because my array is throwing a NULL array before it finally initialises and then gets processed

Anirudh Kanukanti Over a year ago

this.state.message.Items?.map() --- use this

Collectives™ on Stack Overflow

How to map an array that is nested within arrays into a table form?

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related