Radio buttons not selecting React.js

user_8297485 0
Viewed 40

Every time I click on the radio buttons, they don't get selected with the blue mark. I would like to know what I'm doing wrong here. This is the code:

import { useState } from "react";

const Form = () => {
    const [clicked, setClick] = useState("v_likely");

    const clickedRadio = () => {
        setClick(clicked);
    }

    return (
        <div className="form">
            <div className="radio_button" style={{ fontSize: "12px" }}>
                <label>Would you recommend to a friend?</label>
                <div className="radio">
                    <div>
                        <input type="radio" name="v_likely" value={clicked} checked={clicked === "v_likely"} onClick={clickedRadio}></input>
                        <label>Very Likely</label>
                    </div>
                    <div>
                        <input type="radio" name="likely" value={clicked} checked={clicked === "likely"} onClick={clickedRadio}></input>
                        <label>Likely</label>
                    </div>
                    <div>
                        <input type="radio" name="think" value={clicked} checked={clicked === "think"} onClick={clickedRadio}></input>
                        <label>Will Think</label>
                    </div>
                    <div>
                        <input type="radio" name="no" value={clicked} checked={clicked === "no"} onClick={clickedRadio}></input>
                        <label>Not At All</label>
                    </div>
                </div>
            </div>
        </div>
    );
}
export default Form;
reactjs
2 Answers

You should pass the event parameter to the clickedRadio function and use the name of the target to update the value:

  const clickedRadio = (e) => {
    setClick(e.target.name);
  };
user_132112630

You are not updating clicked only assigning again same value. To be able to run below is the code snippet.

import { useState } from "react";

const Form = () => {
    const [clicked, setClick] = useState("v_likely");

    const clickedRadio = (event) => {
        setClick(event.target.name);
    }

    return (
        <div className="form">
            <div className="radio_button" style={{ fontSize: "12px" }}>
                <label>Would you recommend to a friend?</label>
                <div className="radio">
                    <div>
                        <input type="radio" name="v_likely" value={clicked} checked={clicked === "v_likely"} onClick={clickedRadio}></input>
                        <label>Very Likely</label>
                    </div>
                    <div>
                        <input type="radio" name="likely" value={clicked} checked={clicked === "likely"} onClick={clickedRadio}></input>
                        <label>Likely</label>
                    </div>
                    <div>
                        <input type="radio" name="think" value={clicked} checked={clicked === "think"} onClick={clickedRadio}></input>
                        <label>Will Think</label>
                    </div>
                    <div>
                        <input type="radio" name="no" value={clicked} checked={clicked === "no"} onClick={clickedRadio}></input>
                        <label>Not At All</label>
                    </div>
                </div>
            </div>
        </div>
    );
}
export default Form;
user_152742170
Related