pass state as props in component child in React

2529 views components
-3

I get data from a local server, catch them with axios.get, and save them in my state. It's ok, but when i want to pass it as props in an component child, KABOOM! Doesn't work. I'm looking for a solution, I think it's lyfecycle problem but i'm not sure.

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;

Developer Tools Browser say: TypeError: _this.props is undefined (for this.props.tabData.map in 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;

answered question

1 Answer

8

Table is functional component this has no value there and thats what the error message is telling you.

You should use props.tabData and not this.props.tabData

posted this

Have an answer?

JD

Please login first before posting an answer.