Задать вопрос
  • Как вывести данные API в таблицу?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Не надо с DOM напрямую работать.
    Создаете в state переменную: data
    Далее в componentDidMount выполняете ajax запрос и его результат записываете через this.setState({data ... })
    В render методе своего компонента, в таблице делаете обход по this.state.data с помощью map / forEach / тд

    Пример:

    ...
    constructor(props) {
        super(props)
        this.state = {
          data: []
        }
    }
    ...
    componentDidMount() {
        // ваш ajax запрос
        // в success коллбэке устанавливаете новый state, из-за этого произойдет ре-рендер
        success: function(data) { this.setState(data) }
    }
    render() {
    const { data } = this.state
    ...
        <table className='table table-bordered table-striped'>
            <thead>
              <tr>
                <th>name</th>
              </tr>
            </thead>
            <tbody>
              {
                data.map(item => {
                  return (
                    <tr key={item._id}>
                      <td>{item.name}</td>
                    </tr>
                  )
                })
              }
            </tbody>
          </table>
    ...
    }
    Ответ написан
    Комментировать