Can I add optional attributes to an element in React?

Question

Currently, in my React app I have this,

<input style={{ borderColor: valid ? null : "red", boxShadow: valid ? null : "rgb(2, 0, 0)"}} />

If I have more styling to do, it doesn't make sense checking the same condition again and again right? I wish to make the entire style attribute optional; something like this,

<input valid ? null : style={{ borderColor: "red", boxShadow: "rgb(2, 0, 0)"}} />

But I know that's not the right syntax. Isn't there a better way to do this?

DevLoverUmar · Accepted Answer · 2020-06-02 16:05:05Z

3

You should use className to add style classes conditionally.You can use the classnames package as answered to the question

answered Jun 2, 2020 at 16:05

DevLoverUmar

14.3k16 gold badges79 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Karthik G M Over a year ago

Yeah, it does work. I just didn't want to get a new package. Thanks!

Benjamin Eckardt · Accepted Answer · 2020-06-02 16:01:17Z

2

You need to put the logic into the style attribute and pass a neutral element for it in case of valid (or extract it into a variable). I think this should do the trick:

<input style={valid ? {} : { borderColor: "red", boxShadow: "rgb(2, 0, 0)"}} />

edited Jun 2, 2020 at 16:01

answered Jun 2, 2020 at 15:55

Benjamin Eckardt

7286 silver badges11 bronze badges

1 Comment

Karthik G M Over a year ago

Yeah. This works the best for me, without having to create any extra variables and add any packages. Thanks!

M0nst3R · Accepted Answer · 2020-06-02 16:00:00Z

2

You can define your styles as an object in the render method, then assign it optionally as prop to the component using ternary and spread operators.

const styles = {
    borderColor: "red",
    boxShadow: "rgb(2, 0, 0)",
    // etc...
};

return (
    <input { ...(valid ? { styles } : {}) } />
);

answered Jun 2, 2020 at 16:00

M0nst3R

5,3131 gold badge28 silver badges39 bronze badges

Comments

Gustavo · Accepted Answer · 2020-06-02 21:51:08Z

2

One option would be to create a variable:

const inputStyle = !valid ? {
  borderColor: "red",
  boxShadow: "rgb(2, 0, 0)"
} : {};

<input style={inputStyle}/>

It is the same that you currently have but you can add new properties as you wish into the variable without increasing the amount of comparisons in the input tag.

edited Jun 2, 2020 at 21:51

answered Jun 2, 2020 at 15:59

Gustavo

755 bronze badges

Collectives™ on Stack Overflow

Can I add optional attributes to an element in React?

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Linked

Related