How to add checkbox in table in react js?

April 30, 2024

Hi Friends 👋,

Welcome To aHoisting!

To add checkbox in table in react js, you can use input tag with type="checkbox". It will add checkbox in table in react js.

Today, I am going to show you, how to add checkbox in table in react js.

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component. To do this, add the following line to the top of your component file.

import React from 'react';

Step 3: Create a Component.

When the checkbox is clicked, the handleCheckboxChange method is called to update the state accordingly.

<table border="1">
  <thead>
    <tr>
    <th>ID</th>
      <th>Name</th>
      <th>Checkbox</th>
    </tr>
    </thead>
        <tbody>
          {this.state.data.map((item) => (
            <tr key={item.id}>
          <td>{item.id}</td>
          <td>{item.name}</td>
          <td>
          <input
          type="checkbox"
          checked={item.isChecked}
          onChange={() => this.handleCheckboxChange(item.id)}
          />
      </td>
     </tr>
    ))}
  </tbody>
</table>

Define the add checkbox in table example.

The below code is an example of a React. You have to import React and use input tag with type="checkbox" to add checkbox in table in react js.

App.js


import React from 'react';

class TableWithCheckbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { id: 1, name: 'Item 1', isChecked: false },
        { id: 2, name: 'Item 2', isChecked: false },
        { id: 3, name: 'Item 3', isChecked: false },
      ],
    };
  }

  handleCheckboxChange = (id) => {
    const newData = this.state.data.map((item) => {
      if (item.id === id) {
        return { ...item, isChecked: !item.isChecked };
      }
      return item;
    });
    this.setState({ data: newData });
  };

  render() {
    return (
      <table border="1">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Checkbox</th>
          </tr>
        </thead>
        <tbody>
          {this.state.data.map((item) => (
            <tr key={item.id}>
              <td>{item.id}</td>
              <td>{item.name}</td>
              <td>
                <input
                  type="checkbox"
                  checked={item.isChecked}
                  onChange={() => this.handleCheckboxChange(item.id)}
                />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default TableWithCheckbox;

In the above code example, I have used the input tag with type="checkbox" and add checkbox in table in react js.

Check the output of the above code example.

All the best 👍