Conditionally adding props to React Components

Can you only add attributes to a React component if a certain conditions are met?

Great news you can!

Let’s go over a couple techniques.

Solution #1: Inline conditionals in attribute props

You can perform inline conditional statements inside a property attribute.

Here’s an example:

function App() {
  const [mood] = React.useState("happy");

  const greet = () => alert("Hi there! :)");

  return (
    <button onClick={greet} disabled={"happy" === mood ? false : true}>
      Say hi
    </button>
  );
}

Solution #2: if statements

Adding inline conditionals inside attributes may be okay if it’s only 1 or 2 attributes. But if a React component has too many, it may get to clunky, and confusing to read.

So in this example I moved the conditional above the return statement.

function App() {
  let disabled = true;

  const [mood] = React.useState("happy");

  const greet = () => alert("Hi there! :)");

  if ("happy" === mood) {
    disabled = undefined;
  }

  return (
    <button onClick={greet} disabled={disabled}>
      Say hi
    </button>
  );
}

Also note how I’m passing undefined if the mood equals “happy”.

React is smart enough to NOT pass a prop value if the value is falsy.

Falsy values are null, undefined, and false.

Solution #3: Spread props to child component

In the second example I moved the conditional logic above, and created variable for disabled.

Creating too many variables for each prop may be tedious. For example:

function App() {
  let required = false;
  let type = "password";
  let disabled = true;

  if ("password" === type) {
    required = true;
    disabled = false;
  }

  return <input type={type} disabled={disabled} required={required} />;
}

Even typing this was hurting me!

You can simplify this code by using the object spread syntax. Here’s how:

function App() {
  let fieldProps = {
    type: 'password',
    disabled: true,
  };

  if ("password" === fieldProps.type) {
    fieldProps.required = true;
    fieldProps.disabled = false;
  }

  return <input {...fieldProps} />;
}

This may save you a few keystrokes.

If you’re interested in how to conditionally render React components go to this article, “4 React conditional rendering methods with props and state“.

I like to tweet about React and post helpful code snippets. Follow me there if you would like some too!