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>

Can you create a demo of your output here: codesandbox.io and share the link? — m4n0
– m4n0, Commented Jun 24, 2020 at 16:05
Please show more of your React component's code or create an runnable example. — M0nst3R
– M0nst3R, Commented Jun 24, 2020 at 16:07
ok, wait, i am creating on codesandbox.io and gonna share on post itself. — Prabhat kumar
– Prabhat kumar, Commented Jun 24, 2020 at 16:09

Peter · Accepted Answer · 2020-06-24 18:17:39Z

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>
  );
};

edited Jun 24, 2020 at 18:17

answered Jun 24, 2020 at 17:37

Peter

1,2599 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Prabhat kumar Over a year ago

Thanks, i already did the same thing after few hours of struggle. still thanks.

Prabhat kumar Over a year ago

can you still make an effort to add mouseover and mouseout? i also want to add that. if you don;t mind.

Peter Over a year ago

I would make just smt. like this

Peter Over a year ago

I think this answer was cover your question?

Collectives™ on Stack Overflow

how to make custom radiobutton like this in reactjs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related