Making a table with a checkbox that updates table values in React

Question

I'm unfamiliar with React and would appreciate some help. I have a table within a form where each row is a project that has a status (either 'Pending Approval' or 'Approved'). I also have a checkbox in each row. I would like it so that when the checkbox next to a row is selected and the form is submitted, I can change the status of each selected project to 'Approved.'

<Form>
    <FormGroup>
        <Button type="submit" onClick {this.submitClicked}>Approve Projects</Button>
    </FormGroup>
<Table bordered={true}>
    <thead>
        <tr>
            <th>Select</th>
            <th>Project Name</th>
            <th>Project Number</th>
            <th>Project Status</th>
            <th>Min Size</th>
            <th>Max Size</th>
        </tr>
    </thead>
    <tbody>
        {projects.map((project: Project) =>
            <tr key={project.projectNumber}>
                <td>               
                    <FormControl
                        type="checkbox"
                        id="selected"
                        value={project.projectName}
                        onChange={e => this.handleChange(e)}
                    />
                </td>
                <td>{project.projectName}</td>
                <td>{project.projectNumber}</td>
                <td>{project.status}</td>
                <td>{project.minSize}</td>
                <td>{project.maxSize}</td>
            </tr>
        )}
    </tbody>
</Table>
</Form>

What should go in my handleChange function and how should I go about doing this? I was wondering if there was some way to add the selected projects to an array and then change their status value?

bombek · Accepted Answer · 2018-04-05 20:10:36Z

2

You can use components with state. That allows you to manage a state inside a component. Thus you can manipulate it and change the projects' statuses in your example. More about this here: state classes

Example:

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {projects: props.projects};
  }

   handleChange = (e) => {
      let projects = this.state.projects;
      // manipulate your project here
      this.setState({
         projects: projects
      });
   }

   render(){
      return (<Form>
         (...)
      </Form>)
   }
}

answered Apr 5, 2018 at 20:10

bombek

6141 gold badge8 silver badges24 bronze badges

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

3 Comments

User9123 Over a year ago

I am familiar with managing state, but how can I access specific rows in the table? For example, if the 5th project is selected, how do I know that it is the 5th one and how can I then modify the 5th entry in projects?

bombek Over a year ago

Don't you get all the information in the "e" variable? => e.target.value should contain project.name.

User9123 Over a year ago

You're right, thank you! Just used the map function to iterate through projects and find the correct one.

Collectives™ on Stack Overflow

Making a table with a checkbox that updates table values in React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related