What is the proper way to use radio in React? The button gets frozen once checked

Question

I'm using state to control my component, and I'm not sure what part of the following code is causing the code to button to freeze once checked. This is the constructor:

  constructor(props) {
    super(props);


    this.state = {

      firstName: '',
      
      inPerson: false,
      onlineMedium: true,
    };

  }

This function should handle change:

  handleFormChange = (event) => {
    const target = event.target;

 if (target.name === "inPerson" || target.name === "onlineMedium") {

      const value = !this.state[target.name]

      const name = target.name;
      this.setState({
        [name]: value
      });
    } 
else {
      const value = target.value;
      const name = target.name;

      this.setState({
        [name]: value
      });
    }
  }

This renders the component:

  render() {

    return (
      <>
        <label className="tutor-add-label">
          First name
        <input
            className="tutor-add-input"
            type="text"
            name="firstName"
            value={this.state.firstName}
            onChange={this.handleFormChange}
          />
        </label>
        <div className="medium">
          <input
            type="radio"
            id="online"
            name="onlineMedium"
            checked={this.state.onlineMedium}
            onChange={this.handleFormChange}
          />
          <label htmlFor="online">online</label>

          <input
            type="radio"
            id="person"
            name="inPerson"
            checked={this.state.inPerson}
            onChange={this.handleFormChange}
          />
          <label htmlFor="person">In person</label>
        </div>

      </>
    )
  }

Edit: As per the comment below, please let me know if there is another way to select/unselect radio that works better. I was following this http://react.tips/radio-buttons-in-react-16/

Update: It seems that the click doesn't happen (after the first click)for some reason. Does that seem to point in any direction?

first do this>>> if (name === "inPerson" || name === "onlineMedium") — devd, Aug 11 '20 at 16:07
because as per your if statement it will only check first value "inPerson" — devd, Aug 11 '20 at 16:07
I changed it to this>>> if (target.name === "inPerson" || target.name === "onlineMedium") , But it's still frozen — E. Reiner, Aug 11 '20 at 16:08
What would you suggest I use? I was following this site: http://react.tips/radio-buttons-in-react-16/ — E. Reiner, Aug 11 '20 at 16:12
@E.Reiner I think you can use **target.value** instead of **target.name**. I hope it'll work for you — Jay Parmar, Aug 11 '20 at 17:06
@devd Thank you. I don't see any functional change. it seems like the click doesn't happen, so the function doesn't get called for some reason — E. Reiner, Aug 11 '20 at 17:32

E. Reiner · Answer 1 · 2020-08-12T16:19:42.087

This is what worked for me:

Changing the event handler from onChange to onClick and using the following to control state:

        if (target.name === "onlineMedium" || target.name === "inPerson") {
            if (event.target.checked && !this.state[target.name]) {
                this.setState({
                    [target.name]: true,
                })
            }
            else if (event.target.checked && this.state[target.name]) {
                this.setState({
                    [target.name]: false,
                })
            }

        }

Credit: it was inspired by this answer: https://stackoverflow.com/a/57147343/10813256

What is the proper way to use radio in React? The button gets frozen once checked

1 Answers1