how to make custom radiobutton like this in reactjs

Question

How can i make this kind of layout. this is something like radio button. live link - codesandbox.io/s/amazing-sunset-54916 but please read the question too.

initally --

after we select Male

or Female

I need to make this, i already have the images of male & female of without color and with color.

I tried to make it with tag and images into it, but how will i know which one is selected and suppose the option increase in other part like having 6-7 options then? how will i get to know which one is being selected.

In this, onclick of images also not working.

my code--

    <div className="gender">
        <h2 className="title">Gender</h2>
        <a className="round">
          <img
            onClick={(e) => {
              e.src = require("../images/enables_png/1a.png");
            }}
            src={require("../images/disables_png/1a.png")}
            onMouseOver={(e) =>
              (e.currentTarget.src = require("../images/enables_png/1a.png"))
            }
            onMouseOut={(e) =>
              (e.currentTarget.src = require("../images/disables_png/1a.png"))
            }
            className="round_icon"
          ></img>
          <p className="button_detail">Male</p>
        </a>
        <a className="round">
          <img
            src={require("../images/disables_png/1b.png")}
            onMouseOver={(e) =>
              (e.currentTarget.src = require("../images/enables_png/1b.png"))
            }
            onMouseOut={(e) =>
              (e.currentTarget.src = require("../images/disables_png/1b.png"))
            }
            className="round_icon"
          ></img>
          <p className="button_detail">Female</p>
        </a>
      </div>

Answer 1

I would do smt like this: This example not handling the onMouseOver and onMouseOut events. Handle it depending on your needs. (If gets hovered a highlighted element, or a base element gets hovered) If you want to track the data in upper component, just lift out the state from the <Selection /> component

function Comp() {
  return (
    <>
      <div className="gender">
        <h2 className="title">Gender</h2>
        <Selection
          elements={[
            {
              base: require("../images/disables_png/1a.png"),
              highlighted: require("../images/enables_png/1a.png"),
              label: "Male"
            },
            {
              base: require("../images/disables_png/1b.png"),
              highlighted: require("../images/enables_png/1b.png"),
              label: "Female"
            }
          ]}
        />
      </div>
    </>
  );
}

const Selection = props => {
  const [selected, setSelected] = useState(null);

  const [mouseOver, setMouseOver] = useState(null);

  const isSelected = inx => inx === selected;
  return (
    <div>
      {props.elements.map((element, index) => {
        return (
          <a className="round" key={"index-" + index}>
            <img
              key={"i" + index}
              alt="andmatkatola"
              onClick={e => {
                return setSelected(index);
              }}
              src={
                (mouseOver || mouseOver === 0)
                  ? mouseOver === index
                    ? element.highlighted
                    : element.base
                  : isSelected(index)
                    ? element.highlighted
                    : element.base
                }
              onMouseOver={e => {
                setMouseOver(index);
                if(!isSelected(index)) {
                  e.currentTarget.src = element.highlighted
                }
              }}
              onMouseOut={e => {
                setMouseOver(null);
                if(!isSelected(index)) {
                  e.currentTarget.src = element.base
                }
              }}
              className="round_icon"
            />
            <p className="button_detail">
              {element.label} - {index}
            </p>
          </a>
        );
      })}
      {selected}
    </div>
  );
};