How to use radio buttons in ReactJS?

How to Use Radio Buttons in ReactJS?

Radio buttons are an essential form element used to allow users to select a single option from a list of choices. In ReactJS, handling radio buttons is straightforward and can be achieved using various approaches. In this article, we will explore three different methods to implement radio buttons in ReactJS.

Method 1: Using State and onChange Event

The first method involves using the state to manage the selected radio button value and the onChange event to update the state when a radio button is clicked.

Here’s an example code snippet:

{`import React, { useState } from 'react';

function RadioButtons() {
  const [selectedOption, setSelectedOption] = useState('');

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    
      
        
        Option 1
      
      

      
        
        Option 2
      
      

      
        
        Option 3
      
    
  );
}

export default RadioButtons;`}

With this approach, the selected radio button’s value is stored in the selectedOption state variable. The handleOptionChange function is triggered whenever a radio button is clicked, updating the state with the selected option’s value. The checked attribute is used to determine which radio button is currently selected.

Method 2: Using Formik

If you are using the Formik library for form management in ReactJS, you can leverage its Field component to handle radio buttons effortlessly.

Here’s an example code snippet:

{`import React from 'react';
import { Formik, Field } from 'formik';

function RadioButtons() {
  return (
     {
        console.log(values.option);
      }}
    >
      {({ handleSubmit }) => (
        
          
            
            Option 1
          
          

          
            
            Option 2
          
          

          
            
            Option 3
          
          

          
        
      )}
    
  );
}

export default RadioButtons;`}

In this method, we utilize the Field component provided by Formik to handle the radio buttons. The selected option is stored in the option field of the form’s initialValues. Upon form submission, the selected option can be accessed through the values.option object.

Method 3: Using a Custom Radio Button Component

If you prefer a more reusable and customizable approach, you can create a custom Radio Button component in ReactJS.

Here’s an example code snippet:

{`import React, { useState } from 'react';

function RadioButton({ options }) {
  const [selectedOption, setSelectedOption] = useState('');

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    
      {options.map((option) => (
        
          
          {option.label}
        
      ))}
    
  );
}

export default RadioButton;`}

In this method, we create a reusable RadioButton component that accepts an array of options as props. The selected option is stored in the selectedOption state variable, and the handleOptionChange function updates the state accordingly. The options are rendered dynamically using the map function.

Now that we have explored three different methods to use radio buttons in ReactJS, you can choose the one that best fits your project requirements and coding style.

Feel free to experiment with these approaches and adapt them to your specific needs. Happy coding!

How to use radio buttons in ReactJS?