React Radio Button onchange | React Radio Button Example

By Hardik Savani | May 27, 2020 | Category : React JS


Hi Dev,

In this post, we will learn how to use radio button in react js. This article will give you simple example of react radio button onchange event example. In this article, we will implement a react radio buttons example. you'll learn react radio button group example.

If you are new in react js then you want to see how to use radio button in react app. but it's very easy to use radio button input in react js app. you can use it as you use in html and you have to write change event on it. using that change event you have to store value into form state. so you can get that data on submit.

In this example, we will take simple "gender" with male and female radio button and add onchange event with handleChange() then we will assign value on state variable array. Then on submit event we will take that values with state variable.

So, let's see bellow preview and code:

Example Code:

import React, { Component } from 'react';

import { render } from 'react-dom';

class App extends Component {

constructor() {

super();

this.state = {

gender: ''

};

this.handleChange = this.handleChange.bind(this);

this.handleSubmit = this.handleSubmit.bind(this);

}

handleChange(event) {

this.setState({gender: event.target.value});

}

handleSubmit(event) {

console.log(this.state);

event.preventDefault();

}

render() {

return (

<div>

<h1>React Radio Buttons onChange Example - ItSolutionStuff.com</h1>

<form onSubmit={this.handleSubmit}>

<strong>Select Gender:</strong>

<label>

<input

type="radio"

value="male"

onChange={this.handleChange}

/>Male

</label>

<label>

<input

type="radio"

value="female"

onChange={this.handleChange}

/>Female

</label>

<input type="submit" value="Submit" />

</form>

</div>

);

}

}

render(<App />, document.getElementById('root'));

Output:

{gender: "male"}

I hope it can help you...



Tags : React JS


Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: