React JS radio button is not selecting

Question

I am new to React i have written a code for radio button but is it not working, i want to select a default checked but that is not also not working and clicking also i am not able to select any of the button. Please help me and Thanks in advance

var FlightDetails = React.createClass({
    getInitialState:function () {
        return {
            view :'fare',
            selectedOption :0
        };
    },
    handleChange: function (e) {
        if(e.target.value == 'itinerary'){
            this.setState({
                view: 'itinerary',
                selectedOption :1
            })
        }
        if(e.target.value == 'fare'){
            this.setState({
                view: 'fare',
                selectedOption :0
            })
        }
    },
    render:function () {
        return(
            <div id={this.props.id} className="collapse flightDetails">
                <div className="row col-sm-12 col-centered">
                    <label className="col-sm-3 col-xs-12 col-sm-3 col-sm-3">
                        <input type="radio" name="Details" value={'fare'}
                               checked={this.state.selectedOption == 0}
                               onChange={this.handleChange}/>{'  '}Fare
                    </label>
                    <label className="col-sm-3 col-xs-12 col-sm-3 col-sm-3">
                        <input type="radio" name="Details" value={'itinerary'}
                               checked={this.state.selectedOption == 1}
                               onChange={this.handleChange}/> {'  '}Itinerary
                    </label>
                </div>

            </div>
        )
    }
});

Here is jsfiddle.

your code is already working jsfiddle.net/pranesh_ravi/6ndd5fk6 — Pranesh Ravi
– Pranesh Ravi, Commented Sep 29, 2016 at 6:24
The code here is working fine. Your problem must be somewhere else. — poke
– poke, Commented Sep 29, 2016 at 6:38

Boky · Accepted Answer · 2016-09-29 06:40:12Z

1

If I good understood what you want you can something like this :

var FlightDetails = React.createClass({
getInitialState:function () {
    return {
        view :'fare',
        selectedOption: false
    };
},
handleChange: function (e) {
    if(e.target.name == 'itinerary'){
        this.setState({
            view: 'itinerary',
            selectedOption: true
        })
    }
    if(e.target.name == 'fare'){
        this.setState({
            view: 'fare',
            selectedOption: false
        })
    }
},
render:function () {
    return(
        <div id={this.props.id} className="collapse flightDetails">
            <div className="row col-sm-12 col-centered">
                <label className="col-sm-3 col-xs-12 col-sm-3 col-sm-3">
                    <input type="radio" name="fare"
                           checked={!this.state.selectedOption}
                           onChange={this.handleChange.bind(this)}/>{'  '}Fare
                </label>
                <label className="col-sm-3 col-xs-12 col-sm-3 col-sm-3">
                    <input type="radio" name="itinerary" 
                           checked={this.state.selectedOption}
                           onChange={this.handleChange.bind(this)}/> {'  '}Itinerary
                </label>
            </div>

        </div>
    )
}
});

Here is jsfiddle.

edited Sep 29, 2016 at 6:40

answered Sep 29, 2016 at 6:23

Boky

12.1k30 gold badges104 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

avi Over a year ago

Hi Boky, Thanks for your response but i am still not able to select first radio button and also non of the button is selected by default. Is this due to that label tag?

avi Over a year ago

can i get that jsfiddle Link?

Collectives™ on Stack Overflow

React JS radio button is not selecting

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related