How to Conditionally Add Props to React Components?

If you are looking for solutions to add props to React components conditionally then you are in the right place.

Most searched queries for this solution are how to pass props to react component with a condition? react conditional attributes rendering in components.

So in this tutorial, we will see how we can conditional rendering and how we can pass props conditionally?

See Also: How to Make Condition in React JSX?

Let’s get started!

Solution 1. Using Inline Ternary Operator

In this solution, we will use the shorthand form of if-else condition, you can say ternary operator or inline if-else condition.

Syntax

condition ? "Yes" : No

Using this ternary operator in React, in the first part, we will define the conditions. Then define the value of the second part after the ? operator and print it if the condition is true else define the third part after the : operator and print if wrong.

To pass the props in React component see the following line of code.

<MyComponent prop={condition ? "value" : "other value"} />

Let’s take a simple example.

function WelcomeGreeting() {
  	const [greeting] = React.useState("Good Morning!");

  	const welcomeMsg = () => {
  		Console.log("Hi, "+greeting)
  	}

  	return (
    	<Button onClick={welcomeMsg} color={greeting === "Good Afternoon!" ? "Secondary" : "Primary"}>
      		Click me!
    	</Button>
  	);
}

In the above example, first, we use the useState react hook to declare the state with a default value and then define the welcome greeting message function. Then we return the Button props with the attributes and props values.

Solution 2. Spread props Object

Suppose you want to add all the props to react components along with conditional props. Then you can simply do that using the spread operator (…props).

What is actually the spread operator do in React?

Well, it will take care of all the properties of state or props which we are spreading. If we are updating one or two props conditionally then these updated props and other props will come as it is.

Syntax

{...props}
// OR
{...state}

How to use the spread operator in props in React component see the following line of code.

<MyComponent {...attributes} />

Let’s take the same above example to use a spread operator with conditionally pass props in React components.

let attributes = {
	disabled: false,
	className: "btn",
	color: "Primary"
}

if(greeting === "Good Afternoon!") {
	attributes.color = "Secondary";
}

return (
	<Button onClick={welcomeMsg} {...attributes}>
		Click me!
	</Button>
);

In the above code, we are using the spread operator to pass the props in react component. First, we declared all attributes for the Button component, and then we had a condition for props to update the value of it.

You can also make the conditionally spreading object properties. For this, you can use the ternary operator or logical operator with spreading props object.

Spreading props Using the Ternary Operator

...( condition ? { color: "Primary" } : { color: "Secondary" } )

Spreading props Using the Logical Operator

...( condition && { color: "Primary" } )

Solution 3. Using the if-else Sttements

In this last but not least solution, we will use the general if-else statements to conditionally pass the props to react components.

But suppose you have to make many conditions so the variable will be many as you will see in the code below. That’s why I also always go with the above two solutions mostly.

Syntax

if(condition) {
   //code
} else {
   //code
}

Let’s take the above same example to conditionally pass the props in react components using the if-else statements.

let color;

if(greeting === "Good Afternoon!") {
	color = "Secondary";
} else {
	color = "Primary";
}

return (
	<Button onClick={welcomeMsg} color={color}>
		Click me!
	</Button>
);

Hope these three solutions will helpful for you. If you found this tutorial helpful please share it with your friends.

And if you have any queries related to this tutorial or anything, please ask me in the comment section, I will try to respond to you as soon as possible.