Understanding Radio Groups in ReactJS

To begin, let's talk about what radio buttons are. In the world of HTML forms, radio buttons are like the multiple-choice questions you encounter on a test. They provide several options to choose from, but you can only select one. In ReactJS, handling these radio buttons is a bit different, and that's what this post is all about.

The Fundamental Component: RadioButton

In a radio group, each individual radio button can be considered as a component. So, first, we will design our radio button component. Let's call it RadioButton.

function RadioButton({ value, checked, onChange, children }) {
  return (
    <label>
      <input
        type="radio"
        value={value}
        checked={checked}
        onChange={onChange}
      />
      {children}
    </label>
  );
}

In this RadioButton component, we are passing several props, including value, checked, onChange, and children. The input type is set to "radio", which tells the browser that this is a radio button.

Constructing the RadioGroup Component

Now that we have our individual radio buttons, let's group them together. We will create a parent component called RadioGroup. This component will control the value of the radio buttons, ensuring that only one can be selected at a time.

function RadioGroup({ options, value, setValue }) {
  return (
    <>
      {options.map((option) => (
        <RadioButton
          key={option}
          value={option}
          checked={option === value}
          onChange={() => setValue(option)}
        >
          {option}
        </RadioButton>
      ))}
    </>
  );
}

In the RadioGroup component, we are looping through an array of options and rendering a RadioButton for each one. The checked prop is set to true if the current option is the same as the selected value (i.e., option === value).

Utilizing the RadioGroup

Now, let's see how we can use our RadioGroup component. We will make a new component, App, for this demonstration.

function App() {
  const [value, setValue] = useState(null);
  const options = ["Option 1", "Option 2", "Option 3"];

  return (
    <RadioGroup options={options} value={value} setValue={setValue} />
  );
}

In the App component, we are using React's useState hook to manage the state of the selected value. We have also defined an array of options that we pass to the RadioGroup.

Understanding the Control of Value Change

So far, we've seen how to create radio buttons and group them together. But how exactly are we controlling the change in value?

The magic happens in the onChange event handler on the RadioButton component. Whenever a radio button is clicked, the onChange event fires, triggering the setValue function. This function updates the state with the value of the selected radio button.

Consider the radio buttons as a group of friends deciding on a movie to watch. Only one movie can be chosen. The group (i.e., the RadioGroup component) has a leader (i.e., the useState hook) who keeps track of the selected movie. Whenever a friend (i.e., a RadioButton component) suggests a new movie (i.e., the onChange event), the leader updates the group's choice. In this way, the value change in the radio group is controlled.

Conclusion

Radio buttons are a basic yet essential part of any form. Understanding how to control their value change in ReactJS can make your life as a developer much easier. Just remember the group of friends and their movie selection process, and you'll have no trouble dealing with radio groups.

We built a RadioButton component, combined them into a RadioGroup, and controlled the selected value with React's useState hook. This way, we ensured that only one radio button could be selected at a time.

Hopefully, this post helped you understand how to handle radio buttons in ReactJS. Just like the friends deciding on a movie, you have now learned to make your set of radio buttons decide on a value. So go ahead, start creating forms with radio buttons in ReactJS and control their value changes with ease. You are now the leader of your radio group!