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