Как отобразить gridview?

Question

[hollanditkzn]

Когда начал делать что-то свое я немного не понял где я запутался, чтобы отобразить таблицу
Вот https://codepen.io/rusline/pen/xpEzPy?editors=0010 песочницца с примером
Если весь код сюда для удобства я скидываю

class Product extends React.Component{
  render(){
    return(
      <tr>
            <th key={this.props.product.id}>{this.props.product.id}</th>
            <th>{this.props.product.name}</th>
          </tr>
    )
  }
}

class GridView extends React.Component{
  constructor(props){
    super(props);
    console.log(props.product);
  }
  render(){
    return(
      <table>
        <thead>
          <tr>
            <th>id</th>
            <th>name</th>
          </tr>
        </thead>
        <tbody>
          <Product product={this.props.product}/>
        </tbody>
      </table>
    )
  }
}

const СATEGORY = [
  {
    id: 0,
    name: 'Канцтовары',
    createAt: '2017-12-12 10:00:00' 
  },
  {
    id: 1,
    name: 'Мебель',
    createAt: '2017-12-12 11:00:00' 
  },
  {
    id: 2,
    name: 'Электроника',
    createAt: '2017-12-15 08:30:00' 
  },
  {
    id: 3,
    name: 'Бытовая техника',
    createAt: '2017-12-12 10:00:00' 
  },
];

ReactDOM.render(
  <GridView product = {СATEGORY}/>,
  document.getElementById('root')
)

Просто немного после документации я что-то упустил, там конечно со списком было, как начал делать свои примеры в реакте, то ступор зашел

Answer 1

[0xD34F]

Замените

<Product product={this.props.product} />

на

{this.props.product.map(n => <Product key={n.id} product={n} />)}

Comments

[hollanditkzn]

Да заработало, типо разделили массив, на отдельные объекты

Answer 2

[vaskadogana]

перепишите кусочек

<tbody>
          {this.props.product.map(key=>return<Product product={key}/>}
        </tbody>

Comments

[vaskadogana]

только по хорошему нужно делать проверку на наличие и тип данных