How To Set Optional Props With Default Values In React

In this article, you can find all the information to help you set optional props with default values in React. Please take a look at what we cover in the article for a better understanding.

Set optional props with default values in React

Sometimes in our code, we need to declare a property that may or may not be present. We call that optional property. 

The idea of ​​using optional properties is to make your program more flexible. It also somewhat minimizes errors.

You can follow the steps below to be able to set optional props with default values in React:

1. Use the question mark (‘?‘) to mark an attribute as optional.
2. Set values ​​for props in the function’s definition. If you don’t do that, the default value will be undefined.

Check out the following example to see how I apply the above steps:

interface StoreProperties {
    product: string; 
    status: string; 
    quantity?: number; 
}

function Store({product, status, quantity = 0}: StoreProperties) {
    return (
        <div>
        	<h2>{product} is {status} in store. Remaining {quantity}</h2>
        </div>
    );
}

export default function App() {
    return (
        <div>
            <Store product="Security Camera" status="available" quantity={8}/>
            <hr style={{color: "blue", height: "2px"}}/>
            <Store product="Smart Light" status="unavailable"/>
        </div>
    );
}

Output:

Let me explain what just happened in the output. 

In this example, I created an optional prop called quantity. That means the component can be used with or without the quantity prop.

When defining the Store component, we also set the default value for the quantity property to 0. If you don’t declare it when creating an object for the Store component, its value will default to 0. You can see that clearly through the code and the output.

You can completely create a component with all the optional properties. This allows you to use the Store component without passing it any properties.

interface StoreProperties {
    product?: string; 
    status?: string; 
    quantity?: number; 
}
  
function Store({
  	product = "Sample product", 
  	status = "unavailable", 
  	quantity = 0
}: StoreProperties) {
    return (
        <div>
        	<h2>{product} is {status} in store. Remaining {quantity}</h2>
        </div>
    );
}

export default function App() {
    return (
        <div>
            <Store product="Security Camera" status= "available" quantity={8}/>
            <hr style={{color: "blue", height: "2px"}}/>
            <Store/>
        </div>
    );
}

Output:

As you can see, without all three properties: product, status, and quantity; the program still works.

Similar to the first example, we set default values ​​for the props. If any property is omitted, its default value will be obtained. In case no default value is set, it will return undefined instead of displaying an error message.

Summary

In conclusion, the information above will help you set optional props with default values in React. That’s how we do it. Try to practice applying it to your project to get the desired result.

Maybe you are interested:

• How To Check If An Array Is Empty In React
• Solutions For Setting Data Attributes In React
• Set and Access state using a Dynamic key in React

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js