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;

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;

• reactjs
• react-props
• react-functional-component

1 Answer 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;