Using Radio Button in React
Today In this React tutorial, we will explore how to work with Radio buttons in React app. Radio buttons are HTML elements and help the user to choose one option among two or more than two options. In this tutorial, we will learn how to use Radio buttons in React app. Using radio buttons in React is a little bit different than we use in regular HTML. However, we will learn the effortless way to integrate Radio buttons in React.
React Radio Button Example
In this React radio buttons tutorial, we are going to create a basic form in React component using render() method. This form will have five color options, among which a user can choose his favorite color. When a user clicks on the submit button, the radio button state will change.
Basic React App Set Up
Let’s start by installing and setting up the basic React app to show the radio buttons example.
npx create-react-app react-radio-buttons
Enter inside the `react-radio-buttons` project.
cd react-radio-buttons
Run the command to start the React app:
npm start
Define React Radio Button State
Firstly, we will set the radio buttons state. This Radio button state is being referred to as the user’s selection. We set defined the color variable in state and assign the empty (‘ ‘) value in it because the user will choose the color once the form is ready.
class App extends Component {
constructor() {
super();
this.state = {
color: ''
};
}
}
Build React Form with React Render Method
In this step, we will define the HTML form with radio buttons along with color values inside the render() method. This method will render 5 Radio buttons wrapped inside the Unordered Lists.
render() {
return (
<div className=“App”>
<form onSubmit={this.onSubmit}>
<strong>Select Color:</strong>
<ul>
<li>
<label>
<input
type="radio"
value="red"
checked={this.state.color === "red"}
onChange={this.onRadioChange}
/>
<span>Red</span>
</label>
</li>
<li>
<label>
<input
type="radio"
value="green"
checked={this.state.color === "green"}
onChange={this.onRadioChange}
/>
<span>Green</span>
</label>
</li>
<li>
<label>
<input
type="radio"
value="blue"
checked={this.state.color === "blue"}
onChange={this.onRadioChange}
/>
<span>Blue</span>
</label>
</li>
<li>
<label>
<input
type="radio"
value="orange"
checked={this.state.color === "orange"}
onChange={this.onRadioChange}
/>
<span>Ornage</span>
</label>
</li>
<li>
<label>
<input
type="radio"
value="purple"
checked={this.state.color === "purple"}
onChange={this.onRadioChange}
/>
<span>Purple</span>
</label>
</li>
</ul>
<button type="submit">Choose Color</button>
</form>
</div>
);
}
Let us understand what we did in the form. We defined color values in every radio button along with two properties checked and onChange.
The checked prop in our form is managing the selection of a radio button based on the radio button’s color state.
We are validating every radio buttons state with its respective value. When the value is checked, it will be set to true, and the radio button is considered to be selected. If the value is false, then the radio button will be in the unselected state
How is it working?
Well, when a user clicks on any of the radio buttons from the defined group. Then we are updating the state via color variable using the onChange event handler.
Lastly, we declared the onSubmit event handler and attached with the onSubmit method to the main form. So when the user clicks on the submit button, then the radio buttons value gets updated.
Radio Button Selected State in React
We define the value of a Radio button with the state variable. It sets the selected value of a Radio button in React.
class App extends Component {
constructor() {
super();
this.state = {
color: 'green'
};
}
}
It will look something like this in your browser:
Include Event Handler in React Form
In this step, we will include the event handler. This will set and update the sate of Radio button when a user clicks on the radio button.
onRadioChange = (e) => {
this.setState({
color: e.target.value
});
}
The above method will update the color value of a Radio button when change by the user.
The Final Touch
In this final step we will define the onSubmit event handler to the form, this event will trigger when a user submits the form.
Use the event.preventDefault() method, it helps in fixes the page redirecting issue when a user clicks on the submit button.
import React, { Component } from ‘react’;
import ‘…/node_modules/bootstrap/dist/css/bootstrap.min.css’;
class App extends Component {
constructor() {
super();
this.state = {
color: 'green'
};
this.onRadioChange = this.onRadioChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
onRadioChange = (e) => {
this.setState({
color: e.target.value
});
}
onSubmit = (e) => {
e.preventDefault();
console.log(this.state);
}
render() {
return (
<div className=“App”>
<form onSubmit={this.onSubmit}>
<strong>Select Color:</strong>
<ul>
<li>
<label>
<input
type="radio"
value="red"
checked={this.state.color === "red"}
onChange={this.onRadioChange}
/>
<span>Red</span>
</label>
</li>
<li>
<label>
<input
type="radio"
value="green"
checked={this.state.color === "green"}
onChange={this.onRadioChange}
/>
<span>Green</span>
</label>
</li>
<li>
<label>
<input
type="radio"
value="blue"
checked={this.state.color === "blue"}
onChange={this.onRadioChange}
/>
<span>Blue</span>
</label>
</li>
<li>
<label>
<input
type="radio"
value="orange"
checked={this.state.color === "orange"}
onChange={this.onRadioChange}
/>
<span>Ornage</span>
</label>
</li>
<li>
<label>
<input
type="radio"
value="purple"
checked={this.state.color === "purple"}
onChange={this.onRadioChange}
/>
<span>Purple</span>
</label>
</li>
</ul>
<button type="submit">Choose Color</button>
</form>
</div>
);
}
}
export default App;
Following will be the output:
The React Radio button tutorial with example is completed.
Thanks For Visiting, Keep Visiting. If you liked this post, share it with all of your programming buddies!
Further reading
☞ React - The Complete Guide (incl Hooks, React Router, Redux)
☞ Modern React with Redux [2019 Update]
☞ Best 50 React Interview Questions for Frontend Developers in 2019
☞ Best JavaScript Frameworks, Libraries and Tools to Use in 2019
☞ React vs Angular vs Vue.js by Example
#reactjs #react-native #xcode #web-development
