Сопоставить массив с пользовательским интерфейсом материала

Question

Не уверен, существует ли специальное правило при отображении объектов из вызова axios при использовании таблицы пользовательского интерфейса материала ??

   const tableRows = this.props.reduxState.map(row => {
   const {item_description, purchase_date, item_price, item_link} ={TableRowColumn}
      return (
       <Table>
        <TableHeader>
         <TableRow>
          <TableHeaderColumn>Item Description</TableHeaderColumn>
          <TableHeaderColumn>Date of purchase</TableHeaderColumn>
          <TableHeaderColumn>Item Price</TableHeaderColumn>
          <TableHeaderColumn>Link to item</TableHeaderColumn>
         </TableRow>
        </TableHeader>
        <TableBody>
    <TableRow>
    <TableRowColumn>{{item_description}}</TableRowColumn>
    <TableRowColumn>{purchase_date}</TableRowColumn>
    <TableRowColumn>{item_price}</TableRowColumn>
    <TableRowColumn>{item_link}</TableRowColumn>
      </TableRow>
        </TableBody>
   </Table>

    );
  });

Answer 1

Я отформатировал ваш код итеративно,

GetRows(){

const tableRows = this.props.reduxState.map(row => {
   const {item_description, purchase_date, item_price, item_link} ={row}
      return (
        <TableRow>
        <TableRowColumn>{{item_description}}</TableRowColumn>
        <TableRowColumn>{purchase_date}</TableRowColumn>
        <TableRowColumn>{item_price}</TableRowColumn>
        <TableRowColumn>{item_link}</TableRowColumn>
        </TableRow>
    );
  });
  return tableRows;
}
  .......

  render(){
  return(
        <Table>
        <TableHeader>
         <TableRow>
          <TableHeaderColumn>Item Description</TableHeaderColumn>
          <TableHeaderColumn>Date of purchase</TableHeaderColumn>
          <TableHeaderColumn>Item Price</TableHeaderColumn>
          <TableHeaderColumn>Link to item</TableHeaderColumn>
         </TableRow>
        </TableHeader>
        <TableBody>
        <this.GetRows/>
        </TableBody>
   </Table>
  )

  }