React prop value logs "undefined"

- 1 answer

Ad

I recreated a problem with a smaller piece of code. Basically I want to console log the value of components prop. But it keeps logging "undefined"

    var Something = React.createClass({
    propTypes:{
        vouch: React.PropTypes.string
    },

    render: function() {
        return (
        <div>
            <h1 onClick={this.props.onClick} vouch={this.props.vouch}>Click!</h1>
        </div>
        );
    }
});
var List = React.createClass({
    log: function() {
        console.log(this.props.vouch);
    },
    render: function  () {
        return (
            <Something onClick={this.log} vouch="test" />
            );
    }
});
ReactDOM.render(<List />, document.getElementById('react-app'));
Ad

Answer

Ad

Did you forgot to pass it with props: vouch?

<PeopleList vouch="test">

It seems you misunderstood that in your code:

<h1 text="Increment!" onClick={this.log} vouch="Test">Click!</h1>

you are actually passing "test" to h1 element which does not make sense.

Also you can make your props a requirement so you can see errors pop out in your console if you are not passing props correctly by:

propTypes:{
    vouch: React.PropTypes.string.isRequired
},
Ad
source: stackoverflow.com
Ad