Заказ столика с картой

Question

Я пытаюсь заполнить свой стол, я вызываю свой API и выполняю следующие действия:

const addressTd = addressesInfo.map(item => (
<TableRow>
  <TableCell align="right">{item.officeName}</TableCell>
  <TableCell align="right">{item.address1}</TableCell>
</TableRow>));

, затем в моем возвращении я делаю следующее

 <Table>
    <TableHead>
      <TableRow>
        <TableCell>Office Name</TableCell>
        <TableCell>Address Line 1</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableCell>{addressTd}</TableCell>
    </TableBody>
  </Table>

, однако это недать желаемый эффект

Как я могу разрешить офисную улицу отображать по адресу?Thankyou

Answer 1

Вы фактически визуализируете все строки внутри ячейки.Вот исправленная версия:

const addressTrs = addressesInfo.map((item, i) => 
  <TableRow key={i}>
    <TableCell align="right">{item.officeName}</TableCell>
    <TableCell align="right">{item.address1}</TableCell>
  </TableRow>
);

<Table>
  <TableHead>
    <TableRow>
      <TableCell>Office Name</TableCell>
      <TableCell>Address Line 1</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    {addressTrs}
  </TableBody>
</Table>

Также обязательно иметь уникальный key, если у вас есть массив элементов.