How to make a table from an array using map (React app)?

Question

JavaScript

How in my case to run the output of the table through map

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

How to do it right?

<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 code below

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