How to manage state with checkboxes in React?

Question

I am new to React and I am trying to make a table of users and want to use checkboxes to manage their permissions. I have run into a problem with updating the state when I click a checkbox. The handleChange method is where I am having problems. I don't know how to go about identifying the right checkbox to change the state for that specific user. I am thinking maybe I need to add an id prop to each but that seems like it might get out of hand for a large number of users, i.e. one id for each permission per user. I feel like this shouldn't be so difficult but I have been stuck for a long time.

My component code is below.

import React from 'react'
import {Link} from 'react-router'
import {Panel, Button, PageHeader, Row, Col, Table, Input} from 'react-bootstrap'


export class UserPermissions extends React.Component {

constructor() {
    super();
    this.state = {
        users: [
            {   
                name: 'Jerry',
                viewAccounts: true,
                modifyAccounts: true,
                viewUsers: false,
                modifyUsers: true
            },
            {   
                name: 'George',
                viewAccounts: false,
                modifyAccounts: true,
                viewUsers: false,
                modifyUsers: false
            },
            {   
                name: 'Elaine',
                viewAccounts: true,
                modifyAccounts: false,
                viewUsers: false,
                modifyUsers: true
            }
    ]
    }               
}   

handleChange(e){
  //not sure how to write this
}

renderHeadings(data){
    return data.map((step, index) => <th key={index} style={{align:"center"}}>{step}</th>);

}

renderRows(data){
    return data.map((step, index) => 
            <tr key={index}>
                <td>{step['name']}</td>
                <td style={{align:"center", paddingLeft:"40px"}}>
                    <Input type="checkbox"
                           checked={step['viewAccounts']} 
                           onChange={this.handleChange}/></td>
                <td style={{align:"center", paddingLeft:"40px"}}>
                    <Input type="checkbox"
                           checked={step['modifyAccounts']} 
                           onChange={this.handleChange}/></td>
                <td style={{align:"center", paddingLeft:"40px"}}>
                    <Input type="checkbox"
                           checked={step['viewUsers']} 
                           onChange={this.handleChange}/></td>
                <td style={{align:"center", paddingLeft:"40px"}}>
                    <Input type="checkbox"
                           checked={step['modifyUsers']}
                           onChange={this.handleChange} /></td>
                <td style={{align:"center"}}>
                    <Link to="/users"><i className="fa fa-edit fa-2x fa-fw" /></Link>
                    <Link to="/users"><i className="fa fa-times-circle fa-2x fa-fw" /></Link></td>
            </tr>
    );

}

render() {
    return (
        <div>
             <Row>
                <Col lg={12}>
                    <PageHeader>User Permissions</PageHeader>
                </Col>

                <Col lg={12}>
                    <Panel header={<span>Users</span>} bsStyle="primary">
                        <div>
                            <div className="dataTable_wrapper">
                                <div id="dataTables-example_wrapper" className="dataTables_wrapper form-inline dt-bootstrap no-footer">
                                    <Row>
                                        <Col sm={12}>
                                            <Table striped condensed responsive>
                                                <thead>
                                                <tr>
                                                    {this.renderHeadings(this.props.headings)}
                                                </tr>
                                                </thead>
                                                <tbody>
                                                    {this.renderRows(this.state.users)}
                                                </tbody>
                                            </Table>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                        </div>
                    </Panel>
                    <Button bsStyle="success">Add User</Button>
                </Col>
            </Row>
        </div>
        );
}
}

UserPermissions.propTypes = {
headings: React.PropTypes.array
}

UserPermissions.defaultProps = {
headings: ['Name', 'View Accounts', 'Modify Accounts', 'View Users', 'Modify Users']

}

Call handle change with step value like: this.handleChange('modifyUsers') or you can use refs to identify the checkbox. — Pardeep Dhingra
– Pardeep Dhingra, Commented Aug 9, 2016 at 15:09

1ven · Accepted Answer · 2016-08-10 06:01:13Z

3

First, you should add id's to each user. Identifying users by their name is a bad practice:

constructor() {
  super();
  this.state = {
    users: [
      {   
        id: 1,
        name: 'Jerry',
        viewAccounts: true,
        modifyAccounts: true,
        viewUsers: false,
        modifyUsers: true
      },
      { 
        id: 2,  
        name: 'George',
        viewAccounts: false,
        modifyAccounts: true,
        viewUsers: false,
        modifyUsers: false
      },
      {   
        id: 2,
        name: 'Elaine',
        viewAccounts: true,
        modifyAccounts: false,
        viewUsers: false,
        modifyUsers: true
      }
    ]
  }               
}

Next, you should provide to this.handleChange function id of user, name of property we are changing, and current value:

renderRows(data) {
  return data.map((step, index) => 
    <tr key={index}>
      <td>{step['name']}</td>
      <td style={{align:"center", paddingLeft:"40px"}}>
        <Input type="checkbox"
          checked={step['viewAccounts']} 
          onChange={e => this.handleChange(step.id, 'viewAccounts', step['viewAccounts'])}/></td>
      <td style={{align:"center", paddingLeft:"40px"}}>
        <Input type="checkbox"
          checked={step['modifyAccounts']} 
          onChange={e => this.handleChange(step.id, 'modifyAccounts', step['modifyAccounts'])}/></td>
      <td style={{align:"center", paddingLeft:"40px"}}>
        <Input type="checkbox"
          checked={step['viewUsers']} 
          onChange={e => this.handleChange(step.id, 'viewUsers', step['viewUsers'])}/></td>
      <td style={{align:"center", paddingLeft:"40px"}}>
        <Input type="checkbox"
          checked={step['modifyUsers']}
          onChange={e => this.handleChange(step.id, 'modifyUsers', step['modifyUsers'])}/></td>
      <td style={{align:"center"}}>
        <Link to="/users"><i className="fa fa-edit fa-2x fa-fw" /></Link>
        <Link to="/users"><i className="fa fa-times-circle fa-2x fa-fw" /></Link></td>
    </tr>
  );
}

And lastly, in this.handleChange function, we should update particular user data according given values:

handleChange(id, name, value) {
  this.setState({
    users: this.state.users.map((user) => {
      if (user.id !== id) return user;

      // `Object.assign` function is used to return new modified object.
      return Object.assign({}, user, {
        // We should assign opposite to `value` variable value, as we are toggling permissions.
        [name]: !value
      });
    });
  });
}

edited Aug 10, 2016 at 6:01

answered Aug 9, 2016 at 15:39

1ven

7,0361 gold badge29 silver badges39 bronze badges

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

5 Comments

James Thibaudeau Over a year ago

Thanks for the quick reply. I tried what you suggested and it doesn't quite work. If the state of the permission is true it will set it to false, but it won't set false to true. I added console.log(value) in handleChange and it outputs "on" no matter if the box is checked or not. I am working on figuring out why.

James Thibaudeau Over a year ago

I changed checked={step['viewAccounts']} to value={step['viewAccounts']} for all permissions and it now works properly. Thanks again for your help!

James Thibaudeau Over a year ago

Actually what I did didn't fix it properly. On reload the checkboxes do not match which permissions are on or off they are just showing blank now because they don't have the checked prop anymore.

1ven Over a year ago

@JamesThibaudeau, ok, let's try to figure out. First, each input should have it corresponding checked property. You shouldn't set value={step['viewAccounts']} for all inputs. You need to return input's values as in answer. Also, I made a mistake, instead of e.target.value you should also provide to onChange function corresponding value from state. Check updated answer, now it correct.

James Thibaudeau Over a year ago

That makes sense. Making your changes has it setting the state properly and displaying the view as well. Thanks for your help!

ziad-saab · Accepted Answer · 2016-08-15 16:54:56Z

0

Check out the source code of this library to see how they manage the state of checkboxes. Perhaps you could even use it for your needs:

https://www.npmjs.com/package/react-checkbox-group

answered Aug 15, 2016 at 16:54

ziad-saab

20.5k3 gold badges38 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to manage state with checkboxes in React?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related