how to use radio buttons in react class-based components
- Published
- Reading time
- 2 min read
- Length
- 372 words
On this page
Using Radio Buttons in React Class-Based Components#
If you want to create a form with radio buttons in a React class-based component, there are a few steps you need to follow.
Step 1: Import React and Component#
import React, { Component } from 'react';Step 2: Create a Class-Based Component#
Create a class-based component by extending the Component class.
class MyForm extends Component {
render() {
return (
<div>
{/* radio buttons will go here */}
</div>
);
}
}Step 3: Create State for Radio Buttons#
Create state for the radio buttons in the constructor method of the component.
class MyForm extends Component {
constructor(props) {
super(props);
this.state = {
selectedOption: ''
};
}
render() {
return (
<div>
{/* radio buttons will go here */}
</div>
);
}
}In this example, we're setting the initial state of the selectedOption property to an empty string.
Step 4: Create Radio Buttons#
Create radio buttons inside the render method of the component.
class MyForm extends Component {
constructor(props) {
super(props);
this.state = {
selectedOption: ''
};
}
render() {
return (
<div>
<label>
<input
type="radio"
value="option1"
checked={this.state.selectedOption === 'option1'}
onChange={e => this.setState({ selectedOption: e.target.value })}
/>
Option 1
</label>
<label>
<input
type="radio"
value="option2"
checked={this.state.selectedOption === 'option2'}
onChange={e => this.setState({ selectedOption: e.target.value })}
/>
Option 2
</label>
</div>
);
}
}In this example, we're using the checked property to determine if a radio button is selected or not. We're also using the onChange event to update the selectedOption state when a radio button is selected.
Step 5: Add Submit Button#
Add a submit button to the form.
class MyForm extends Component {
constructor(props) {
super(props);
this.state = {
selectedOption: ''
};
}
handleSubmit = event => {
event.preventDefault();
console.log(this.state.selectedOption);
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div>
<label>
<input
type="radio"
value="option1"
checked={this.state.selectedOption === 'option1'}
onChange={e => this.setState({ selectedOption: e.target.value })}
/>
Option 1
</label>
<label>
<input
type="radio"
value="option2"
checked={this.state.selectedOption === 'option2'}
onChange={e => this.setState({ selectedOption: e.target.value })}
/>
Option 2
</label>
</div>
<button type="submit">Submit</button>
</form>
);
}
}In this example, we're adding a handleSubmit method that will be called when the form is submitted. We're also wrapping our radio buttons in a form element and adding a submit button.
That's it! Now you know how to use radio buttons in a React class-based component.