javascript - Two ternary operators spread into one inline style giving 'Failed to compile' error

Question

I am trying to use two ternary operators in one line for a style element inline. This is the code I am trying to pass:

style={{ ...display: mode === "single" ? "none" : "block",
         ...display: gradientSelected === 'radial' ? "block" : "none" }}

"mode" and "gradientSelected" are states, these are the states:

const [gradientSelected, setGradientSelected] = useState("linear")
const [mode, setMode] = useState("single")

Any idea why I am getting this error?

Is there a better way to use two ternary operators in one line?

Also, is there a way to have two conditions in one ternary function? In my example, if mode === single AND gradientSelected === linear, display none.

question from:https://stackoverflow.com/questions/65649520/two-ternary-operators-spread-into-one-inline-style-giving-failed-to-compile-er

Answer 1

If you're going to spread an object, it needs to be an object first:

const mode = "single";
const gradientSelected = "foo";

const style = {
  ...{ display: mode === "single" ? "none" : "block" },
  ...{ display: gradientSelected === 'radial' ? "block" : "none" }
};
         
console.log(style);