Search code examples
reactjsfunctiontailwind-cssuse-state

How to set useState to choose only one Color

I got a list 3 div's with a background of different colors , if i clicked on one of them the function will set the State to true which will render a tick icon that is nested inside the div , but i can only choose one color , how i can modify the code so if i clicked on one div the states for that div will be true and the tick icon will appear but it will disappear from the other div's (if previously selected).

enter image description here

const [colorPick, setColorPick] = useState(false);

const colorPickHandler = () => {
    setColorPick(!colorPick);
  }; 

<button className="cursor-pointer" onClick={colorPickHandler}>
              <div className="mt-3 border-2 border-solid border-black bg-red-600 w-8 h-8">
                {colorPick && (
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                )}
              </div>
            </button>
<button className="cursor-pointer" onClick={colorPickHandler}>
              <div className="mt-3 border-2 border-solid border-black bg-blue-600 w-8 h-8">
                {colorPick && (
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                )}
              </div>
            </button>
<button className="cursor-pointer" onClick={colorPickHandler}>
              <div className="mt-3 border-2 border-solid border-black bg-pink-600 w-8 h-8">
                {colorPick && (
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                )}
              </div>
            </button>
Solution

  • colourPick should be a string, not a Boolean

    It should take on the values of “red”, “blue”, or “brown”

    So you can do something like colourPick === “red” && renderSvg