How to Use Optional Props With Default Values in React

1. Optional Props in TypeScript
2. Optional Props With Default Values in TypeScript
3. Use the defaultProps Property in React to Set Default Values for Props

Props in React allow us to pass data and arguments among different components, which can flow through the entire component tree in React. The props passed on to different components can have fixed types defined as primitive or user-defined types as in TypeScript.

This tutorial will demonstrate how React’s optional props can be used with default values.

Optional Props in TypeScript

In TypeScript, a type or prop can be made optional using the ? operator. This fact can be used to pass optional parameters in React.

interface OptionalComponentProps {
    color? : string;
    title : string;
    size? : number;
}

In the above example, containing the type definition of props of a particular component, the color and size attributes are defined to be optional.

interface Props {
    color? : string;
    size: number;
    title? : string;
}

function Card(props : Props){
    const { color , size, title} = props;
    return (
        <div>
            <div>{color}</div>
            <div>{size}</div>
            <div>{title}</div>
        </div>
    )
}

function App() {
    return (
        <div>
            <Card size={20} title="Cool card" />
        </div>
    )
}

Thus in the above example, the parent component is App, and props of type Props are passed on to the Card component. The color and title attributes are marked optional by the ? operator.

If the optional attribute is not passed on as a prop to the component, it is initialized as undefined and thus not shown or rendered.

Optional Props With Default Values in TypeScript

The above example can also be used with default values provided with the component.

interface Props {
    color? : string;
    size: number;
    title? : string;
}

function Card(props : Props){
    const { color = 'red' , size, title = 'Default title'} = props;
    return (
        <div>
            <div>{color}</div>
            <div>{size}</div>
            <div>{title}</div>
        </div>
    )
}

function App() {
    return (
        <div>
            <Card size={20} title="Cool card" />
        </div>
    )
}

Earlier the color attribute was not rendered as there was no default value, but now as no value is passed as props, the default value is used to render the component. However, the default value for the title attribute is not used, as it gets overridden by the passed-on the prop to the component.

Use the defaultProps Property in React to Set Default Values for Props

React has the support for assigning default values to props passed using the defaultProps attribute. The default values can be directly assigned and used while rendering the component.

interface Props {
    color? : string;
    size: number;
    title? : string;
}

const defaultProps : Props = {
    color :"red",
    size : 20,
    title : "A cool title"
}

function Card(props : Props){
    return (
        <div>
            <div>{props.color}</div>
            <div>{props.size}</div>
            <div>{props.title}</div>
        </div>
    )
}

Card.defaultProps = defaultProps;

function App() {
    return (
        <div>
            <Card size={20} title="Cool card" />
        </div>
    )
}