React - props is not defined

Question

I have two components.

1. MypropDestructuring.jsx (main component)
2. MypropDestructuringMessage.jsx (using for prop destructuring) (I'm new for destructuring concept in React)

I think I am doing somewhere wrong in (MypropDestructuringMessage.jsx) props destructuring.

On console log I am getting following error-

Uncaught ReferenceError: props is not defined at MypropDestructuringMessage.render (index.js:33930)

Code:

MypropDestructuring.jsx

// Let's import react
import React from "react";

// Import custom component
import MypropDestructuringMessage from "./MypropDestructuringMessage.jsx";


// Let's create component [[ MypropDestructuring ]]
class MypropDestructuring extends React.Component{

    // Let's create custom method
    _myProfile() {

        const myProfileData = [
            {
                id : 1,
                name : "Neon",
                age : 25,
                location : "UK",
                skill : "UI Dev"
            }
        ];

        // return
        return myProfileData.map( (profileArrg) => {

                return( 
                    <MypropDestructuringMessage key={profileArrg.id} name={profileArrg.name} age={profileArrg.age} location={profileArrg.location} skill={profileArrg.skill} /> 
                );
            }
        );

    }

    render(){

        const showProfile = this._myProfile();
        return(
            <section>

                <p>&nbsp;</p>
                <h6> Prop Desturcturing </h6>
                <hr />

                <div>
                    {showProfile}
                </div>

            </section>
        );
    }
}


// Let's render ReactDOM
export default MypropDestructuring;

MypropDestructuringMessage.jsx

// Let's import react
    import React from "react";

    // Let's create component [[MypropDestructuringMessage]]
    class MypropDestructuringMessage extends React.Component{
        render(){


            // Props destructuring
            const {name, age, location, skill} = props;

            return(

                <section>

                    <div>
                        <ul className="list-group">
                            <li className="list-group-item"> {name} </li>   
                            <li className="list-group-item"> {age} </li>   
                            <li className="list-group-item"> {location} </li>   
                            <li className="list-group-item"> {skill} </li>    
                        </ul>
                    </div>

                </section>
            );
        }
    }

    // Let's pass data with [[ propTypes ]] - object
    MypropDestructuringMessage.propTypes = {
        name : React.PropTypes.string.isRequired,
        age : React.PropTypes.number.isRequired,
        location : React.PropTypes.string.isRequired,
        skill : React.PropTypes.string.isRequired
    }


    // Let's render ReactDOM
    export default MypropDestructuringMessage;

Answer 1

Use this.props not only props :

const {name, age, location, skill} = this.props;

Here is the documentation on Destructuring assignment

Answer 2

Props are bound to context of the component (this), they are not global, that's why you're getting an error. Use this.props instead of props, unless you need to handle them in constructor, as in constructor this.props is still undefined. If you need props in constructor, they are sent as a parameter:

constructor(props) {
    super(props);
    // this.props is not defined at this point, so you have to use props
    // do something with props here
}

You can read more on props in react in this article, it's useful for people new to React or ones who want to freshen up their knowledge, so check it out if you're interested!

Answer 3

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import axios from 'axios'

import PairsList from './PairsList.jsx'
import RosterList from './RosterList.jsx'
import NewPairsForm from './NewPairsForm.jsx'

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      rosterOrPairs: true,
      cohort: []
    }
    this.title = 'Pairs'
    this.onClickRoster = this.onClickRoster.bind(this)
    this.onClickPairs = this.onClickPairs.bind(this)
  }

  componentWillMount() {
    axios.get('/cohort')
      .then( (response) => {
        console.log('response.data is ', response.data)
        this.setState({ cohort: response.data })
      })
      .catch( (error) => console.log(error) )
  }

  onClickRoster() {
    this.setState({ rosterOrPairs: true })
  }

  onClickPairs() {
    this.setState({ rosterOrPairs: false })
  }

  render() {
    return(
      <div>
        <div className="title">{this.title}</div>
        <NewPairsForm cohort={this.state.cohort} />
        <div className="buttons-section">
          <button onClick={this.onClickRoster}>Roster</button>
          <button onClick={this.onClickPairs}>Pairs</button>
        </div>
        { this.state.rosterOrPairs ? <RosterList cohort={this.state.cohort} /> : <PairsList /> }
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'))