Блог

Я пытаюсь сопоставить реквизиты, переданные функциональному компоненту, который принимает заголовки реквизитов (массив заголовков) и данные (массив объектов) в таблицу. У меня есть нефункциональный код:

 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>
  );
}
 

Заголовки заполняются идеально, однако я не уверен, как правильно вложить сопоставление, чтобы я мог получить значения столбцов dataElement, используя заголовки, отображаемые в качестве значений доступа к свойствам. Любая помощь будет с благодарностью!