Как сделать таблицу из аррея через map (приложение на React)?

Question

[Ninja Mate]

Как в моем случае запустить вывод таблицы через map

data:               [
                           {'name': 'Education', 'number': 33},
                           {'name': 'Promotion', 'number': 10},
                           {'name': 'Events', 'number': 55 }
                         ]

Как правильно сделать?

<Table >
                    <tbody>
//сюда нужно вставить код вывода таблицы
{this.state.data.map(function(row, i) {
          return (
            <tr key={i}>
              {row.map(function(col, j) {
                return <td key={j}>{col}</td>;
              })}
            </tr>
          );
        })}

                    </tbody>
                </Table>

Answer 1

[Максим]

import React, { Component } from 'react'

export default class App extends Component {

  render() {
    const data = [
      {'name': 'Education', 'number': 33},
      {'name': 'Promotion', 'number': 10},
      {'name': 'Events', 'number': 55 }
     ]

    let tableTemplate;

    function makeColumns(row) {
      return <td>{row.name} {row.number}</td>
    }

    tableTemplate = data.map((row, i) => {
      return <tr key={i}>{makeColumns(row)}</tr>
    })

    return (
      <table>
        <tbody>
          {tableTemplate}
        </tbody>
      </table>
    )
  }
}

ES5 код ниже

import React, { Component } from 'react'

export default class App extends Component {

  render() {
    var data = [
      {'name': 'Education', 'number': 33},
      {'name': 'Promotion', 'number': 10},
      {'name': 'Events', 'number': 55 }
     ];

    var tableTemplate;

    function makeColumns(row) {
      return <td>{row.name} {row.number}</td>
    }

    tableTemplate = data.map(function(row, i) {
      return <tr key={i}>{makeColumns(row)}</tr>
    });

    return (
      <table>
        <tbody>
          {tableTemplate}
        </tbody>
      </table>
    )
  }
}

Comments

[Ninja Mate]

Спасибо разобрался с вашей помощью, сделал немного проще, не стал с колоннами заморачиваться

render() {
        var tabl = this.state.data;

        return (
            <div>
                <Table responsive striped bordered condensed hover>
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Quantity</th>
                    </tr>
                    </thead>
                    <tbody>
                    {
                        tabl.map( function(item,index)
                            {
                                return(
                                    <tr key={index}>
                                        <th>{1+index}</th>
                                        <th>{item.name}</th>
                                        <th>{item.number}</th>
                                    </tr>
                                )
                            }
                        )
                    }
                    </tbody>
                </Table>

[Максим]

Yeap! Так несомненно лучше. Функции и переменные удобны для разбития на небольшие шаблоны (templates)