React hooksでstateを変えても色が変わらない

Question

表題の通りです。

コードは以下になります。

const [checked, setCheck] = useState(false);

<div onClick={() => setCheck(!checked)}>
  <i
    className="fas fa-check-circle fa-2x mr-5"
    style={{ color: checked ? 'blue' : 'gray' }}
   />
</div>

こちらクリックしても、要素の色が変わらず困っています。
確認したこととして、

style={color: 'blue'}
とか
style={color: 'gray'}

とかすれば色はちゃんと変わります。
また、

{console.log(checked)}

をおいても、しっかりtrue、falseがクリックするたびに変わります。
booleanの値がstyle=以下に伝わってないような気がします。

例えば、

 style={{ color: true ? 'blue' : 'gray' }}

こうすればうまく動き、青色に変わります。
しかし、trueの部分をcheckedに変えた瞬間に動かなくなります。

どなたかご教授ください。

何卒よろしくお願いします。

Comments

[jun68ykt]

こんにちは。ご質問に挙げられているコードだけを持つコンポーネントを作り、それだけをマウントするサンプルを 以下のCodePen
https://codepen.io/jun68ykt/pen/YzPPaVa?editors=1010
に作成してみましたが、意図通り、クリックすることで青と灰色が入れ替わり、問題の状況が再現できませんでした。はっきりしたことは分かりませんが、問題はご質問に挙げられているコード以外の部分にあるのかもしれません。

[tomoharu]

ありがとうございます。そうですよね。。。
codepenとの違いとしては、const App ()=> {}ではなく、function App(){}の形になっている。
あたりですかね。。。でも関係ないですもんね。。

[tomoharu]

useStateって複数使えますよね。。。。

[jun68ykt]

> 。。。 でも関係ないですもんね。。
はい。 codepen のほうを function App に変えましたが、問題なく動きます。

[jun68ykt]

> useStateって複数使えますよね。。。。
はい。使えますよ。
CodePen のコードのほうに
const [checked2, setCheck2] = React.useState(false);
を追加して、2個目のアイコンの状態を持たせるようにしてみました。

[tomoharu]

承知しました。ありがとうございます。もう少し考えてみます。

Answer 1

すいません。解決しました。

iのタグではなく、外のタグにstyleを定義するとうまくいきました。

<div
  onClick={() => {
       setCheck(!checked);
  }}
  style={{ color: checked ? 'blue' : 'gray' }}
>

原因は不明ですが。。。