React js onclick issue - reactjs

Question

I am trying to create an custom Radio button like feature. By putting onClick on div to change the state value and I am not able to change the same. Please help me understand what I am missing on.
const [category, setCategory] = useState("");
const handleSubmit = e => {
console.log(e);
setCategory(e.target.value);
};
return (
<>
<CenterAlignedColumnContainer>
<FormHeadingText>
<FormSectionHeadingTextContainer>
Category
</FormSectionHeadingTextContainer>
</FormHeadingText>
<CategoryContainer>
<TextRadioButton
value="Salads"
onClick={handleSubmit}
name="category"
>
<RadioButtonText>
<TextContainer>Salads</TextContainer>
</RadioButtonText>
</TextRadioButton>
<TextRadioButton value="Pasta" onClick={handleSubmit} name="category">
<RadioButtonText>
<TextContainer>Pasta</TextContainer>
</RadioButtonText>
</TextRadioButton>
</CategoryContainer>
<PartialWidthDivider />
</CenterAlignedColumnContainer>
</>
);
}
Styled div for custom Radio button
export const TextRadioButton = styled.div`
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 10px;
background: rgba(176, 167, 230, 0.5);
box-shadow: 0px 4px 4px rgba(176, 167, 230, 0.5);
border-radius: 20px;
margin-left: -10px;
margin: 8px;
`;

Answer 1

div does not have a value property, so you should reference it i.e. as a passed prop:
<TextRadioButton value='something' onClick={handleSubmit(props.value)} />
and use it explicitly
handleSubmit(value) {
setCategory(value);
}

Answer 2

change your onClick method to :
onClick={(e)=>handleSubmit(e}
or
onClick={
(e)=>{
console.log(e);
setCategory(e.target.value);
};

Answer 3

So there's a couple of problems wrong with this, this first and foremost being that you have a pseudo-element covering your entire display:
export const Background = styled.div`
width: 100%;
&:before {
display: block;
position: absolute;
width: 100%;
height: 400vh;
content: "";
background: url(https://res.cloudinary.com/antilibrary/image/upload/v1595154947/Piatto/backgroundFormNew_sk7yie.svg)
repeat center center;
opacity: 0.5;
}
`;
When an element is :before it means it is above any further elements in the stacking context, the same way that hard-coded elements are. A simple solution is to give the pseudo-element z-index: -1, which will ensure that it is placed behind everything else. Ideally, however, you would not use a pseudo-element at all, but instead a distinct div placed absolutely behind everything.
The second is that your buttons are not using good semantic HTML, and as a result you will not be able to target value, which does not exist on divs. Additionally, since the text of the button is separate from the button itself, there will be cases where it returns undefined anyway as the target of the event does not hold the button's value.
What I suggest you do first is change TextRadioButton to be a styled.button, you may need to adjust some of your styles to accommodate this. Then, change the event handler to the following:
const handleSubmit = e => {
const value = e.currentTarget.value;
setCategory(value);
};
The currentTarget of an event is the element where the event is registered, not whichever child element actually triggered it, which you access with regular target. This way, no matter which part of the button is clicked on, it will always reference the value on the top level of the button component.