Как в React сгенерировать произвольную таблицу через цикл?

Question

[Masterstvo]

Добрый день! Начинаю разбираться в React.js, создаю приложения типа календаря. Задача состоит в том, чтобы сгенерировать с помощью цикла таблицу в рамках определенного компонента. Пока не получается. Может кто подскажет как это реализовать? Буду благодарен. Мой код ниже..

import React, { Component } from 'react';

import './App.css';

class Content extends Component {
    getTable(){
        for(let i; i<=6; i++){
            let tr = document.createElement('tr');
            document.getElementById('table').appendChild(tr);
        }
    }
    render() {
        return (
            <div className="Content">
                <table id='table'>
                    {this.getTable}
                </table>
            </div>
        );
    }
}

export default Content;

Answer 1

[Виталий]

<div id="root"></div>

class Table1 extends React.Component  {
  render() {
        return (
            <div className="Content">
                <span> Table </span>
                <table id='table'>
                    {
                      this.props.data.map(elem=>{
                        return (<tr> {elem} </tr>)
                          })
                    }
                </table>
            </div>
        );
    }
}
ReactDOM.render(
<Table1 data={[1,2,3,4,5]}/>,
  root
)

Comments

[Masterstvo]

Согласен, спасибо! Только не совсем понятно зачем в map два раза возвращать с помощью =>, а потом еще и return ?

[Виталий]

() => { ... } функция , можно записать и в кратком виде this.props.data.map(elem=>)

[Виталий]

терпеть не могу тостер, когда уже тут в коментах перестануть тереть теги....

Answer 2

[FRI3NDS]

class Header extends React.Component {
  constructor() {
    super();
    this.state = {
      items: [
        { name: 'Google', link: 'https://google.com' },
        { name: 'Yandex', link: 'https://yandex.com' }
      ] };
  }

  render() {
    const list = this.state.items.map((item, index) => {
      return <li key={index}><a href={item.link}>{item.name}</a></li>;
    });

    return <ul>
      {list}
    </ul>;
  }
}

Answer 3

[Виталий]

getTable() должен возвращать таблицу, а не добавлять что-то в найденную по id. И функцию нужно вызывать, а не передавать текст этой функции.
В вашем случае, просто в table запустить цикл map, возвращающий