How to specify default value for props in React.js

Amit Merchant · March 28, 2021 ·

While working on an application which is built using React.js, I stumbled upon a use-case where I needed to set a default value for a specific component prop. Let’s check the following example to understand how I approached this problem.

The example

So, there is a React component called <UserPreference> which can be used for processing various preferences for users. Here’s how the component looks like.

function UserPreference(props) {
  return (
    <div>
        <p>Update User Preferences here</p>
    </div>
  );
}

Now, the use-case was to pass in a prop to this component which is if true should allow the user to edit the preference otherwise it shouldn’t allow. So, I passed in a canEdit prop to the component which allows user to edit preferences like so.

<UserPreference 
    canEdit={true}
/>

And here’s how I can utilize this prop in the component.

function UserPreference(props) {
  if (props.canEdit) {  
    return (
        <div>
            <p>Update User Preferences here</p>
        </div>
    );
  }

  return (
    <div>
        <p>You are not allowed.</p>
    </div> 
  )
}

Now, the problem here is the component is being utilized at many places throughout the application and I didn’t want to pass in the canEdit prop everywhere. So, I needed to specify a default value for this prop (which is false) in case if it doesn’t get passed in to the component at all. How can you do it?

Object destructuring to the rescue

Well, you can use ES6’s object destructuring to specify a default value for the prop. So, previous example can be changed to use object destructuring like so.

function UserPreference({
    canEdit = false
}) {
  if (canEdit) {  
    return (
        <div>
            <p>Update User Preferences here</p>
        </div>
    );
  }

  return (
    <div>
        <p>You are not allowed.</p>
    </div> 
  )
}

As you can tell, you can set the default value for a prop which will be overridden by prop value when given to the component.

👋 Hi there! I'm Amit. I write articles about all things web development. If you like what I write and want me to continue doing the same, I would like you buy me some coffees. I'd highly appreciate that. Cheers!

Comments?