This.props returning undefined?

Question

I'm currently passing data into my component via props, and for some reason it's showing up as undefined. From my parent component perspective I have the following pass 2 props, data and header .

class ContractTable extends Component {
constructor(props) {
    super(props);
    this.state = {
        data: []
    };
}

render() {
    return (
        <div>
            <p></p>
            <MuiThemeProvider>
                <TableTest
                    data={this.state.data}
                    header={[
                        {
                            name: "First Name",
                            prop: "firstName"
                        },
                        {
                            name: "Last Name",
                            prop: "lastName"
                        },
                        {
                            name: "Age",
                            prop: "age"
                        },
                        {
                            name: "Height",
                            prop: "height"
                        },
                        {
                            name: "Address",
                            prop: "address"
                        }
                    ]}
                />
            </MuiThemeProvider>
            <p></p>
        </div>
    );
}

I try to grab the props and set it as my state, but when I log this.props.data or this.props.header it returns undefined. Why is this?

import React, { Component } from 'react';
import {
Table,
TableBody,
TableHeader,
TableHeaderColumn,
TableRow,
TableRowColumn,
} from 'material-ui/Table';

class TableTest extends Component {
constructor(props) {
    super(props);

    this.state = {
        data: props.data,
        header: props.header
    }

    this.row = this.row.bind(this);
}

row = (currentValue, index, header) => (
    <TableRow key={`t-${index}`}>
        {
            header.map((headerName, index) => (
                <TableRowColumn key={`trc-${index}`}>
                    {currentValue[headerName.prop]}
                </TableRowColumn>
            ))
        }
    </TableRow>
);

render() {
    return 'hello'
}
}

export default TableTest;

Answer 1

Update: take a look https://jsfiddle.net/nroLmghv/

Just rendered simple table header.

Passing props to state is not a good approach.

---

I created a snippet. And it looks working. Point in which place do you have a problem. Or provide MuiThemeProvider and TableTest full code.

 class Example extends React.Component { constructor(props) { super(props) this.state = { // mock value data: "some value" } } render() { return <div> <TableTest data={this.state.data} header={[ { name: "First Name", prop: "firstName" }, { name: "Last Name", prop: "lastName" }, { name: "Age", prop: "age" }, { name: "Height", prop: "height" }, { name: "Address", prop: "address" } ]} /> </div>; } } class TableTest extends React.Component { constructor(props) { super(props); this.state = { data: this.props.data, header: this.props.header } console.log(this.state.data) console.log(this.state.header) } render() { return <div></div>; } } ReactDOM.render( <Example />, document.getElementById('root') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"> </div>

Answer 2

Its an antipattern to set a state that is directly derivable from props, you would rather use the props directly. Also if you use the props to set state and you need to update state based on props change, you would also need to implement componentWillReceiveProps function