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:
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;
import './Button.css';
const Button = () => {
return ( <li>{ this.props.label }</li> );
}
export default Button;
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')
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.
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> );
}
}
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;