[Q&A] react useStateを使用し、スイッチボタンを点滅・消灯をする

react useStateを使用し、スイッチボタンを点滅・消灯をする

解決したいこと

react usestateを使った実装です。実装したいことの詳細は下記になります。
・switchボタンを押して点滅・消灯を繰り返せること
・switchボタンを押した10回目は1〜9回目と違う色になること

発生している問題・エラー

・switchボタンの消灯ができない
・10回目の消灯の色を設定できていない

該当するソースコード


import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function LightBulb() {
  let [light, setLight] = useState(0);

  const setOn = () => setLight(1);

  let fillColor = light === 1 ? "#ffbb73" : "#000000";

  return (
    <div className="App">
      <div>
        <LightbulbSvg fillColor={fillColor} />
      </div>

      <button onClick={setOn}>switch</button>
    </div>
  );
}

自分で試したこと

現在、具体的な対応策が見つかっていない状況です、、、、
頭の中ではif文を使って実装するのかな、、、など思考は働きますがコードに反映できておりません。

2Answer

@yucatio posted at 2022-06-22

とりあえず


const setOn = () => setLight(light + 1);

にしてみてはいかがでしょう。

1Like

Comments

@shi_082844
Questioner
アドバイスありがとうございます！

This answer has been deleted for violation of our Terms of Service.