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 (
);
}
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 }) => (
)}
);
}
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) => (
))}
);
}
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!
Leave a Reply