ReactJS: Uncheck previously checked checkbox when another checkbox is checked

Question

So, I have this code located in Advanced.js. It generates checkboxes.

<div>
    <h6>Sellers</h6>
    {
    data.data.map((item, i) => {
        return <div className="custom-control custom-checkbox" key={i}>
                 <input type="checkbox" className="custom-control-input" id={item.slug} name={item.slug} onClick={this.props.filterItems()}/>
                 <label className="custom-control-label" htmlFor={item.slug}>{item.name}</label>
                </div>
    }) 
    }
</div>

and this is from the index.js. I called Advanced.js: <Advanced filterItems={() => this.getBrand}

and this is the getBrand function:

getBrand = (e) => {
        var checked = !e ? false : e.target.checked
        var name = !e ? "" : e.target.name
        if(checked){
            this.setState({
                brands: name
            }, () => {
                this.filterSeller()
            })
        }else{
            this.setState({
                brands: ""
            }, () => {


    this.home()
        })
    }

}

what happens is that, when I check a checkbox and checked another, both of them are checked. like this:

What I want to happen is that, when I check another checkbox, the previously checked checkbox should become unchecked. How can I do that? Thanks!

Use a controlled component: reactjs.org/docs/forms.html

Daniel Hilgarth
– Daniel Hilgarth

2018-10-23 06:41:54 +00:00
Commented Oct 23, 2018 at 6:41 — Daniel Hilgarth
– Daniel Hilgarth, Commented Oct 23, 2018 at 6:41

Jimi Pajala · Accepted Answer · 2018-10-23 06:33:38Z

2

You should use radio-buttons which are made exactly for this use case https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

answered Oct 23, 2018 at 6:33

Jimi Pajala

2,37813 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

ReactJS: Uncheck previously checked checkbox when another checkbox is checked

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related