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

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.

CodePudding user response：

Add ? after datamapping

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

CodePudding user response：

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

this.state.message.Items.map()