Get "PHP 8 in a Nuthshell" (Now comes with PHP 8.3)
Amit Merchant

Amit Merchant

A blog on PHP, JavaScript, and more

How to specify default value for props in React.js

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.

Like this article? Consider leaving a

Tip

👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.

Comments?