How do you access the parent element being mapped in a child map (nested maps)

I am attempting to map props passed in to a functional component that takes the props headers (an array of headers), and data (an array of objects) to a table. The nonfunctional code I have is:

export default function DenseTable(props) {
  const classes = useStyles();

  return (
    <div className={classes.table}>
      <TableContainer component={Paper}>
        <Table className={classes.table} size="small" aria-label="a dense table">
          <TableHead>
            <TableRow>
              {props.headers.map(header => <TableCell align="left" >{header}</TableCell>)}
            </TableRow>
          </TableHead>
          <TableBody>
            {props.data.map((dataElement) => (
              <TableRow key={dataElement.symbol}>
                {Object.keys(dataElement).map(columnValue => <TableCell align="left" >{columnValue}</TableCell>)}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}

The headers populate perfectly, however, I am not sure how to properly nest the mapping so I could get the dataElement's column values using the headers mapped in as property accessor values. Any help would be greatly appreciated!

from Recent Questions - Stack Overflow https://ift.tt/3pYsMlT
https://ift.tt/eA8V8J