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?

score 3 · Answer 1 · answered Jun 02 '20 at 16:05

3

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

answered Jun 02 '20 at 16:05

DevLoverUmar

11,809
11
68
98

Yeah, it does work. I just didn't want to get a new package. Thanks! – Karthik G M Jun 02 '20 at 18:05

Benjamin Eckardt · Accepted Answer · 2020-06-02T16:01:17.757

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 02 '20 at 16:01

answered Jun 02 '20 at 15:55

Benjamin Eckardt

709
6
10

Yeah. This works the best for me, without having to create any extra variables and add any packages. Thanks! – Karthik G M Jun 02 '20 at 18:01

Gustavo Vieira · Answer 3 · 2020-06-02T21:51:08.123

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 02 '20 at 21:51

answered Jun 02 '20 at 15:59

Gustavo Vieira

75
5

score 2 · Answer 4 · answered Jun 02 '20 at 16:00

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 } : {}) } />
);

Can I add optional attributes to an element in React?

4 Answers4