I am working on a small React app. It has a list of buttons in a Buttons.js component.

Following this guide, I am trying to pass the value of the label attribute into the single button template like this:

In Buttons.js:

import './Buttons.css';
import Button from './Button';

const Buttons = (props) => {
 return (
  <ol >
   <Button label="Clik 1" />
   <Button label="Clik 2" />
   <Button label="Clik 3" />
  </ol>
 );
};

export default Buttons;

In Button.js:

import './Button.css';

const Button = () => {
  return ( <li>{ this.props.label }</li> );
}

export default Button;

The problem

The code above shows no error in the console, but it does throw this in the browser's console:

Cannot read properties of undefined (reading 'props')

CodePudding user response：

The correct code is

import './Button.css';

const Button = (props) => {
  return ( <li>{ props.label }</li> );
}

export default Button;

You forgot to pass props and you were using this.props.label.

CodePudding user response：

You're confusing Class Components and Function Components.

In a Function Component, like the one you, have props are passed as the first argument to the function.

const Button = (props) => {
    return ( <li>{props.label}</li> );
}

And commonly destructured:

const Button = ({label}) => {
    return ( <li>{label}</li> );
}

You would access props via this if you were writing a Class Component:

class Button extends React.Component {
    render() {
        return ( <li>{this.props.label}</li> );
    }
}

CodePudding user response：

First, your Button component is a functional component, so no need for this. Second, you need to define props in your button component;

const Button = (props) => {
  return ( <li>{ props.label }</li> );
}

export default Button;

CodePudding user response：

In Button.js you forgot to pass props as parameter to the functional component

const Button = (props) => { return ( <li>{ props.label }</li> ); }

And no need to do this.props.label Replace it with props.label