三元运算符不适用于带有 React [Hooks] 的内联 styles

Question

Basically, I have a state that is a true or false. The state name is DisplayFirstColorPicker. If its true, I want the inline style to be the const 'showColorPicker', if its false, it should be the const 'hideColorPicker'.

However, when I run the inline Ternary operator, I get a "Failed to compile" error.

Any idea whats wrong?

The inline code:

State:

  const [displayFirstColorPicker, setDisplayFirstColorPicker] = useState(false)

Inline code

<div class="firstColorPicker" style={{DisplayFirstColorPicker ? {showColorPicker} : {hideColorPicker}}}>

The consts

const showColorPicker = {
    display: "block",
  }

  const hideColorPicker = {
    display: "none",
  }

Answer 1

You are doing all kinds of weird stuff here. You have one too many braces on the outside, and also should not be using object short hand notation like {showColorPicker} which would compile to { showColorPicker: { display: none} }

style={DisplayFirstColorPicker? showColorPicker: hideColorPicker} style={DisplayFirstColorPicker? showColorPicker: hideColorPicker} should do the trick.