Introduction

In React, you usually do not "manually add or remove attributes" the way you might in direct DOM code. Instead, you express the attribute value as a JavaScript expression and let React decide what gets rendered.

The most practical patterns are conditional booleans, conditional values such as undefined, and conditional object spread. Which one you use depends on whether the prop is a standard DOM attribute or a custom component prop.

Simple Boolean Attributes

For DOM attributes such as disabled, checked, or required, the cleanest pattern is often a boolean expression.

function SaveButton({ isSaving }) {
  return <button disabled={isSaving}>Save</button>;
}

When isSaving is true, the button is disabled. When it is false, React omits the disabled state.

This is the most common conditional attribute case in React.

Use undefined to Omit a Value

For attributes that should exist only in some cases, returning undefined is often useful.

1function Link({ url, openInNewTab }) {
2  return (
3    <a
4      href={url}
5      target={openInNewTab ? "_blank" : undefined}
6      rel={openInNewTab ? "noopener noreferrer" : undefined}
7    >
8      Open
9    </a>
10  );
11}

When openInNewTab is false, React does not render target or rel on the DOM element.

This is clearer than building long string conditions inline.

Conditional Object Spread

When several props appear together, conditional spread keeps the JSX readable.

1function Link({ url, openInNewTab }) {
2  const extraProps = openInNewTab
3    ? { target: "_blank", rel: "noopener noreferrer" }
4    : {};
5
6  return <a href={url} {...extraProps}>Open</a>;
7}

This pattern is useful when a condition controls a bundle of related attributes.

It also works for ARIA attributes and data attributes:

1<input
2  aria-invalid={hasError || undefined}
3  data-state={isLoading ? "loading" : undefined}
4/>

DOM Elements vs. Custom Components

This distinction matters a lot.

For DOM elements such as button, input, or a, React decides how to render or omit attributes in the final HTML.

For custom components, props are just JavaScript values passed to another function.

1function Field(props) {
2  console.log(props.required);
3  return <input required={props.required} />;
4}
5
6<Field required={condition ? true : undefined} />

The child component still receives a prop named required, even if its value is undefined. That is different from saying the prop never existed at the JavaScript level.

So when you want conditional behavior in a custom component, think in terms of prop values, not raw HTML attribute presence.

Conditionally Add className and Styles

People often mean className or style when they ask about conditional attributes.

1function Alert({ isError }) {
2  return (
3    <div className={isError ? "alert alert-error" : "alert"}>
4      Message
5    </div>
6  );
7}

And for styles:

function Box({ hidden }) {
  return <div style={{ display: hidden ? "none" : "block" }} />;
}

These are still just conditional props, even though they affect styling rather than DOM semantics.

Common Pitfalls

The biggest mistake is trying to manipulate attributes imperatively instead of expressing them through props and state.

Another common issue is forgetting the difference between DOM elements and custom components. Omitting a DOM attribute is not the same thing as omitting a prop from a custom component's JavaScript call.

People also overuse ternaries when a direct boolean expression is enough. disabled={isSaving} is cleaner than disabled={isSaving ? true : false}.

Finally, when using conditional spread, make sure the fallback is an object such as {}. Spreading a non-object value will fail.

Summary

• In React, conditional attributes are usually conditional props.
• Use direct booleans for boolean DOM attributes such as disabled.
• Use undefined when you want many DOM attributes omitted.
• Use conditional spread for groups of related attributes.
• Distinguish between DOM attribute rendering and custom component props.
• Keep the JSX declarative instead of manipulating attributes manually.