Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Set radio button default checked in react?

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
like image 474
mehrab habibi Avatar asked Jul 14 '19 18:07

mehrab habibi


People also ask

How to set the default value of a React Radio button element?

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.

How to create a radio button group with react and checked props?

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.

What is the difference between value and checked in React Radio buttons?

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.

Is it possible to use radio buttons in react?

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.


2 Answers

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);
like image 147
Ram Sankhavaram Avatar answered Sep 20 '22 12:09

Ram Sankhavaram


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
like image 39
Sultan H. Avatar answered Sep 16 '22 12:09

Sultan H.