Why aren't defaultProps applied to my React functional component?

Question

I'm working on a React project and attempting to use defaultProps with a functional component. However, when I don't explicitly pass props, the default values are not being applied.

Course component:

function Course(props) {
    return (
      <div className={Styles.card}>
      <img src={props.image} alt="" />
      <h2>{props.name}</h2>
      <p>{props.price}</p>
    </div>
    );
}

Course.defaultProps = {
    image: image1,
    name: "Default Course",
    price: "1 Like + 1 Subscribe",
};

export default Course;

App component:

function App() {
    return (
        <>
            <Course name="HTML" price="$200" image={image1} />
            <Course name="CSS" price="$250" image={image2} />
            <Course name="JavaScript" price="$500" image={image3} />
            <Course />
        </>
    );
}
export default App;

Hamed Jimoh · Accepted Answer · 2025-03-15 10:57:11Z

1

Because Component.defaultProps is now deprecated and the React team recommend using the JavaScript defaultValue instead. This question is similar to the question asked here:

Unable to render/see the default value of a prop in React

In your case, you would need to get rid of the Course.defaultProps and adjust your code as follows:

function Course({image = image1, name = "Default Course", price = "1 Like + 1 Subscribe"}) {
    return (
      <div className={Styles.card}>
      <img src={image} alt={name} />
      <h2>{name}</h2>
      <p>{price}</p>
    </div>
    );
}

export default Course;

edited Mar 15 at 10:57

answered Mar 15 at 10:21

Hamed Jimoh

1,4662 gold badges10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why aren't defaultProps applied to my React functional component?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related