CODEWITHSUNDEEP
reactjsfunctiontailwind-cssuse-state
user18095537
user18095537

Reputation:

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>

Upvotes: 0

Views: 177

Answers (2)

MagnusEffect
MagnusEffect

Reputation: 3915

You can define the state like an object for all the 3 colors. Like,

state = {red:false, blue:false, yellow:false};

if (e.target.name === 'red') setState = { red:true, blue:false, yellow:false }
else if (e.target.name === 'blue') setState = { red:false, blue:true, yellow:false };
else if (e.target.name === 'yellow') setState = { red:false, blue:false, yellow:true }

Here you need to pass e parameter in the ColorPicker(e) function.

And add name="red" to red button and respectively for others.

Upvotes: 0

Cotldus
Cotldus

Reputation: 146

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

Upvotes: 1

Related Questions