I created radio button with 3 radios: I want to have lime as default checked radio button, I set lime as default value but it didn't work.
here is my code And I don't know how to solve my problem.
import React, {Component} from 'react';
class App extends Component{
constructor(props){
super(props)
this.handleflavorSubmit = this.handleflavorSubmit.bind(this)
this.onChangeRadio = this.onChangeRadio.bind(this)
this.state = {value : 'lime'};
}
onChangeRadio(e){
this.setState({value : e.target.value})
}
handleflavorSubmit(e){
alert("your favorite flavor is " + this.state.value)
e.preventDefault();
}
render(){
return(
<div>
<h1>Choose your flavor:</h1>
<form onSubmit = {this.handleflavorSubmit}>
<input type="radio" checked = {this.state.value === 'grapefruit'} onChange = {this.onChangeRadio} value= "grapefruit"/>Grapefruit
<input type = "radio" checked = {this.state.value === 'lime'} onChange = {this.onChangeRadio} value = "lime"/>Lime
<input type = "radio" checked = {this.state.value === 'orange'} onChange = {this.onChangeRadio} value = "orange"/>Orange
<input type = "submit" value = "submit"/>
</form>
</div>
)
}
}
export default App
To set the default value, we just set the initial value of the fruit state since we used that as the value of the value prop. The button that’s clicked should have the same value that’s displayed. To set the default value of a React radio button element, we just have to set the value prop to the state value that we want.
To create a radio button group with React and set the default checked value of it, we have to set the value to the state that we want. Then we’ve to set the checked prop to be the expression to compare the value of the radio button with the currently selected value. This way, React will check the right one.
Just like with any other React component type, value and checked are component properties. However, checked is an interactive property, because it's affected via user interactions: user can select it and unselect it by selecting another radio button. Figure 2. Selected radio button. Figure 3. Unselected radio button.
The good news is: Radio Buttons in React 16 is available! How do you use radio buttons in React.js? I agree, it can be confusing at first. Let me explain it to you with a help of a simple example.
Your code is actually working. You just need to include paranthesis after the return.
Try it out in CodeSandbox. Here is the working code: https://codesandbox.io/s/red-rain-r81n4
import React,{Component} from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends Component{
constructor(){
super()
this.handleflavorSubmit = this.handleflavorSubmit.bind(this)
this.onChangeRadio = this.onChangeRadio.bind(this)
this.state = {value : 'lime'};
}
onChangeRadio(e){
this.setState({value : e.target.value})
}
handleflavorSubmit(e){
alert("your favorite flavor is " + this.state.value)
e.preventDefault();
}
render(){
return (
<div>
<h1>Choose your flavor:</h1>
<form onSubmit = {this.handleflavorSubmit}>
<input type="radio" checked = {this.state.value === 'grapefruit'} onChange = {this.onChangeRadio} value= "grapefruit"/>Grapefruit
<input type = "radio" checked = {this.state.value === 'lime'} onChange = {this.onChangeRadio} value = "lime"/>Lime
<input type = "radio" checked = {this.state.value === 'orange'} onChange = {this.onChangeRadio} value = "orange"/>Orange
<input type = "submit" value = "submit"/>
</form>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App/>, rootElement);
Add defaultChecked
property for the input
radio that you want to set as checked on it's first mount.
<input type = "radio" defaultChecked checked = {this.state.value === 'lime'} onChange = {this.onChangeRadio} value = "lime"/>Lime
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With