передать состояние как реквизит в дочернем компоненте в React

Question

Я получаю данные с локального сервера, ловлю их с помощью axios.get и сохраняю их в моем состоянии.Это нормально, но когда я хочу передать это как реквизит в дочернем компоненте, KABOOM!Не работаетЯ ищу решение, я думаю, это проблема lyfecycle, но я не уверен.

App.js

import React, { Component } from 'react';
import './style/App.css';
import axios from 'axios'
import Table from './Components/Table'


class App extends Component {

    state = {
      tabData: [],
    }

    componentWillMount = () => {
      this.getDataFromServer()
    }

    getDataFromServer = () => {
      axios.get("http://localhost:8000")
      .then((response) => {
        const twentyObj = response.data.splice(-20);
        this.setState({
          tabData:twentyObj
        })
        console.log(this.state.tabData)
      })
        .catch(function (error) {
          console.log(error);
        })
    }


  render() {

    return (
      <div className="App">

        <Table stateData={this.state.tabData}/>

      </div>
    );
  }
}

export default App;

Браузер инструментов разработчика говорит: TypeError: _this.props не определено (для this.props.tabData.map в Table.js)

Table.js

import React from 'react';
import Cell from './Cell'


const Table = (props) => {


    return(

        <div>
        {this.props.tabData.map( item => 
          <Cell key={item.index}
                time={item.timestamp}
                nasdaq={item.stocks.NASDAQ}
                cac40={item.stocks.CAC40}/>
        )}
      </div>
    )
}

export default Table;

Answer 1

Table является функциональным компонентом this не имеет значения там, и это то, что говорит вам сообщение об ошибке.

Вы должны использовать props.tabData, а не this.props.tabData

ОБНОВЛЕНИЕ:

Здесь вы передаете его как stateData, а не tabData. Попробуйте props.stateData