Search code examples
cssreactjsreact-hooksstyled-components

Radio Button Selection in React

I have successfully selected a radio button. My problem is I want to include the selection with the label also. The labels/words should be clickable also.

Here's my codesandbox CLICK HERE

 <RadioButton
    label="Food"
    name="radio"
    value="optionA"
    checked={select === "optionA"}
    handleChange={(event) => handleSelectChange(event)}
  />
  <RadioButton
    label="Water"
    name="radio"
    value="optionB"
    checked={select === "optionB"}
    handleChange={(event) => handleSelectChange(event)}
  />
Solution

  • Just custome like this: https://codesandbox.io/s/react-styled-components-radio-button-forked-efxzd?file=/src/Radio.js:1554-1613

    In the App:

    const handleSelectChange = (value) => {
  setSelect(value);
};

<RadioButton
  handleChange={handleSelectChange}
/>

    And in the RadioButton:

    const handleChecked = () => {
  handleChange(value);
};

<Item onClick={handleChecked}>