Create a custom radio button using React JS

Question

I'm trying to create a custom radio button. The issue that i'm facing is that i'm unable to uncheck the radio button when another radio button is clicked. Currently it behaves like a checkbox.

import {React, ReactDOM} from '../../shared/lib/react';

export default class RadioButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          checkedRadioBtn: false
        };
        this.toggleRadioBtn = this.toggleRadioBtn.bind(this);
     };


    toggleRadioBtn(){
        this.setState({checkedRadioBtn: !this.state.checkedRadioBtn});
    };

    render() {
        return (
            <div className="radio-btn-group">
                <div onClick={this.toggleRadioBtn} className={this.state.checkedRadioBtn ? "radiobtn checked" : "radiobtn unchecked"} data-value={this.props.value}></div>
                <label>{this.props.text}</label>
            </div>
        );
    }
};

for <input type=radio name=example /> - you need to set same name variable, but you are using <div>, so provide more code to see what is going on. — Petro Popelyshko
– Petro Popelyshko, Commented Apr 27, 2016 at 14:18

Rohit Singh Sengar · Accepted Answer · 2016-04-27 15:02:11Z

You need to have container for group of radio buttons. That container will maintain the state for all the radio buttons and handle check/uncheck for each option. Here is the sample code for that,

import React from 'react'
import ReactDOM from 'react-dom'

class RadioBtn extends React.Component{

    constructor(props) {
        super(props);
    }

    handleClick(){
        this.props.handler(this.props.index);
    }

    render() {
        return (
            <div className="radio-btn-group" onClick={this.handleClick.bind(this)}>
                <div className={this.props.isChecked ? "radiobtn checked" : "radiobtn unchecked"} data-value={this.props.value}></div>
                <label>{this.props.text}</label>
            </div>
        );
    }
}

class RadioGrp extends React.Component{

    constructor() {
        super();
        this.state = {
          selectedIndex: null,
          selectedValue: null,
          options: ["option 0","option 1","option 2","option 3"]
        };
    }

    toggleRadioBtn(index){
        this.setState({
          selectedIndex: index,
          selectedValue: this.state.options[index],
          options: this.state.options
        });
    }

    render() {

        const { options } = this.state;

        const allOptions = options.map((option, i) => {
            return <RadioBtn key={i} isChecked={(this.state.selectedIndex == i)} text={option} value={option} index={i} handler={this.toggleRadioBtn.bind(this)} />
        });

        return (
            <div>{allOptions}</div>
        );
    }
}

var app = document.getElementById('app');

ReactDOM.render(<RadioGrp />, app);

JeffBaumgardt · Accepted Answer · 2016-04-27 14:41:57Z

Since you're using a div for a custom checkbox that doesn't behave like a normal checkbox you should be checking value against the selected value.

toggleRadioBtn(e){
    this.setState({checkedRadioBtn: e.target.value});
};

Another question that I have is that you are assuming a single checkbox here so I have to assume you have a calling component that returns multiple instances. If that is the case then you need to pass your onClick down so you can pass the value back up to the parent. Then pass the selected value back down.

This is an example that I have in my application.

var languges = this.props.languages;
    var languageToSelect = this.state.selectedLanguage;
    var handleChange = this.handleChange;
    var languageRows = Object.keys(languges).map(function(key) {
        var language = languges[key];
        return <LanguageBlock
                    key={ key }
                    language={ language }
                    languageCode={ key }
                    checked={ languageToSelect === key }
                    handleChange={ handleChange }
                />;
    });

In my use case I have multiple languages and onChange I pass the selected language back up then on rerender the selected language will be updated so the radio options will reflect the change.

handleChange: function handleChange(event) {
    this.setState({ selectedLanguage: event.target.value });
},

The handle change just sets state for the new value. The language block itself is just a simple component so no need to make it a class/component.

const LanguageBlock = ({ checked, language, languageCode, handleChange }) => {
return (
    <div className="truncification">
        <input type="radio" name="lang" id={ 'lang_' + languageCode }
            value={ languageCode } checked={ checked } onChange={ (evt) => { handleChange(evt); } } />
        <label htmlFor={ 'lang_' + languageCode }>{ language }</label>
    </div>
);
};

Collectives™ on Stack Overflow

Create a custom radio button using React JS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related