Changing one buttons color

Viewed 23

I'm have having issues trying to change one buttons color so the user can see which button they have clicked. The problem arises because I can't target the value because that is what is getting stored in firebase. I am using styled-components and I just can't seem to be able to change the background of the button clicked without messing up the value stored. Thank you in advance.

  const [formData, setFormData] = useState({
    images: {},
    description: '',
    price: 0,
    title: '',
    type: ''
});


   const onMutate = (e) => {
    if (e.target.files) {
        setFormData((prevState) => ({
            ...prevState,
            images: e.target.files,
        }));
    }
    if (!e.target.files) {
        setFormData((prevState) => ({
            ...prevState,
            [e.target.id]: e.target.value,
        }));
    }
};

This is where I am calling onMutate

 <CategoryButton
                    type="button"
                    data={button_data}
                    id="type"
                    value="clothes"
                    onClick={onMutate}
                >Clothes</CategoryButton>
             
                <CategoryButton
                    type="button"
                    id="type"
                    value="shoes"
                    onClick={onMutate}
                >Shoes</CategoryButton>
           
                <CategoryButton
                    type="button"
                    id="type"
                    value="jewelry"
                    onClick={onMutate}
                >Jewelry</CategoryButton>
      
                <CategoryButton
                    type="button"
                    id="type"
                    value="outdoor"
                    onClick={onMutate}
                >Outdoor</CategoryButton>
             
                <CategoryButton
                    type="button"
                    id="type"
                    value="electronics"
                    onClick={onMutate}
                >Electronics</CategoryButton>

Data being sent to firebase

0 Answers
Related