How are default props declared in a React functional component

Question

Can you tell me How are default props declared in a React functional component?

Answer 1

In React functional components, default prop values can be assigned using the following method:

Setting defaultProps as a Property of the Component:

Although this method is traditionally used, it is important to note that as of React 17, setting defaultProps on functional components is deprecated. Therefore, it is recommended to use default parameters instead.

import React from 'react';

const MyComponent = (props) => {

  return (

    <div>

      <p>{props.prop1}</p>

      <p>{props.prop2}</p>

    </div>

  );

};

MyComponent.defaultProps = {

  prop1: 'defaultValue1',

  prop2: 'defaultValue2',

};

export default MyComponent;