4

I'm not sure how I can build a selection button, like to a radio button in React using TypeScript. The button must have an image and a color change of the button when selected.

Here is an example photo

enter image description here

I created a component, but I don't know how I can make the selection.

interface ItemProps extends InputHTMLAttributes<HTMLButtonElement> {
  label: string;
  name: string;
  options: Array<{
    label: string;
    value: string;
    image: string;
  }>;
}

const Selector: React.FC<ItemProps> = ({
  label,
  name,
  options,
  ...rest
}: ItemProps) => {
  return (
    <>
      <div className="col">
        <p>{label}</p>
        {options.map((option) => (
          <>
            <label className="btn" htmlFor={name}>
              <input type="radio" id={name} value={option.value} />
              <img src={option.image} />
              <span className="checkmark"></span>
              <p>{option.label}</p>
            </label>
          </>
        ))}
      </div>
    </>
  );
};```
Improve this question
3
  • 1
    hi, perhaps add an active class on selection stackoverflow.com/questions/42630473/react-toggle-class-onclick Commented Apr 5, 2022 at 23:45
  • 1
    Have a parent element hold the selected state of the form and pass that state to the child. From there the child can use ternary to determine which class to actively use based on the state of the parent component. Commented Apr 5, 2022 at 23:47
  • 1
    You can actually handle this selection with state and state and a dynamic class to highlight the selected option. Commented Apr 5, 2022 at 23:56
Related questions
326
How to use radio buttons in ReactJS?
13
How do I use radio buttons in React?
3
Creating radio button in React using ref
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.