CODEWITHSUNDEEP
javascriptreactjs
Razvan Zamfir
Razvan Zamfir

Reputation: 4648

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')

Upvotes: 0

Views: 73

Answers (4)

EEAH
EEAH

Reputation: 747

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

Upvotes: 1

Quentin
Quentin

Reputation: 943746

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> );
    }
}

Upvotes: 2

Mark Barton
Mark Barton

Reputation: 897

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;

Upvotes: 1

codedump
codedump

Reputation: 387

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.

Upvotes: 4

Related Questions