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>