What causes the failure to pass props from parent to child in this React application?

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 class="buttons-container">
   <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')

>Solution :

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.