Hi i just want to render a table where name column name and its value dynmamically fetch from an api .. and I store column value in an new array ; I want to return rows value that link with column name in a row

const element = [ "ENDURANCE", "SPEED", "AGILITY", "STRENGTH" ] // this is my column name

api data of rows value

 
​
[
    {
        AGILITY: 1
        ENDURANCE: 1
        SPEED: 1
        STRENGTH: 1
        _id: "62c53266b631f27c54db8d89"
        date: "7/6/2022"
    }, {
        AGILITY: "4"
        ENDURANCE: "4"
        SPEED: "6"
        STRENGTH: "2"
        _id: "62c5a047a053c4ebb5de8c10"
        date: "7/6/2022"
    },
    ​{
        AGILITY: "8"
        ENDURANCE: "6"
        SPEED: "5"
        STRENGTH: "10"
        _id: "62c5a053a053c4ebb5de8c14"
        date: "7/6/2022"
    }
]

I just map this value in table dynamically this is my code ....

 <table className="table">
                    <thead>
                      <tr>
                        <th>/</th>
                        <th>Date</th>

                        {props.data.map((cur, i) => {
                          element.push(cur[0])  //store all column names
                          return <th key={i}>{cur[0]}</th>;
                        })}
                      </tr>
                    </thead>
                    <tbody>
                      {props.stdata.map((curr, index) => {
                        
                        console.log(element);
                        return (
                          <>
                            <tr>
                              <td>{index+1}</td>
                              <td>
                                {curr.date} // date element is same in every api data
                              </td>
                              <td>{
                                curr[element] // may be this is wrong
                                }</td>
                            </tr>
                          </>
                        );
                      
                      })}
                    </tbody>
                  </table>

this is how table looks