Reusable Checkbox List component example in react js

• Create Components folder under src folder
• Create  common folder under Components folder
• Create CheckboxList folder under common folder
• Add index.js file under CheckboxList folder and add below Code

import React from "react";

import PropTypes from "prop-types";

const CheckboxList = ({

  type = "checkbox",

  name,

  checked = false,

  onChange

}) => <input type={type} name={name} checked={checked} onChange={onChange} />;

CheckboxList.propTypes = {

  type: PropTypes.string,

  name: PropTypes.string.isRequired,

  checked: PropTypes.bool,

  onChange: PropTypes.func.isRequired

};

export default CheckboxList;

• Add style.css file and add below Code

// CSS code here

• Go to Components Folder and Add CheckboxListEXP.js file and add below Code

import React from "react";

import CheckboxList from "./common/CheckboxList/index";

const checkboxes = [

  {

    name: "CB1",

    key: "1",

    label: "CB1"

  },

  {

    name: "CB2",

    key: "CB2",

    label: "CB2"

  },

  {

    name: "CB3",

    key: "CB3",

    label: "CB3"

  },

  {

    name: "CB4",

    key: "CB4",

    label: "CB4"

  },

  {

    name: "CB5",

    key: "CB5",

    label: "CB5"

  },

  {

    name: "CB6",

    key: "CB6",

    label: "CB6"

  },

  {

    name: "CB7",

    key: "CB7",

    label: "CB7"

  }

];

class CheckboxListEXP extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      checkedItems: new Map()

    };

  }

  handleChange = e => {

    const item = e.target.name;

    const isChecked = e.target.checked;

    this.setState(prevState => ({

      checkedItems: prevState.checkedItems.set(item, isChecked)

    }));

    // console.log(item + "-" + isChecked);

    // console.log(this.state.checkedItems);

  };

  render() {

    return (

      <>

        {checkboxes.map(item => (

          <label key={item.key}>

            {item.name}

            <CheckboxList

              name={item.name}

              checked={this.state.checkedItems.get(item.name)}

              onChange={this.handleChange}

            />

          </label>

        ))}

        <h4>Seleted Ites</h4>

        <ul>

          {[...this.state.checkedItems].map(([item, Key]) => (

            <li key={item}>

              {item}-{Key.toString()}

            </li>

          ))}

        </ul>

      </>

    );

  }

}

export default CheckboxListEXP;

• Open App.js file and update code as below

import React from 'react';

import CheckboxListEXP from './Components/CheckboxListEXP'

function App() {

  return (

    <div>

      <CheckboxListEXP/>

    </div>

  );

}

export default App;

Output:

Reusable CheckBox component example in react js

• Create Components folder under src folder
• Create  common folder under Components folder
• Create CheckBox folder under common folder 
• Add index.js file under CheckBox folder and add below Code

import React from "react";

import "./style.css";

const CheckBox = props => {

  return (

    <div className="checkbox">

      <label>

        <input

          id={props.id}

          type="checkbox"

          value={props.value}

          checked={props.isChecked}

          onChange={props.onclickHandler}

        />

        {props.value}

      </label>

    </div>

  );

};

export default CheckBox;

• Add style.css file and add below Code

// CSS Style here

• Go to Components Folder and Add CheckBoxEXP.js file and add below Code

import React, { useState } from "react";

import CheckBox from "./common/CheckBox/index";

export default function CheckBoxEXP() {

  const [cb1, setcb1] = useState(false);

  const [cb2, setcb2] = useState(false);

  const toggleCheckboxChange = e => {

    cb1 === true ? setcb1(false) : setcb1(true);

  };

  const toggleCheckboxChange1 = e => {

    cb2 === true ? setcb2(false) : setcb2(true);

  };

  return (

    <div>

      <h3>CheckBox reusable component example</h3>

      <CheckBox

        id={"cb1"}

        value={"One"}

        isChecked={cb1}

        onclickHandler={toggleCheckboxChange}

      />

      <CheckBox

        id={"cb2"}

        value={"Two"}

        isChecked={cb2}

        onclickHandler={toggleCheckboxChange1}

      />

    </div>

  );

}

• Open App.js file and update code as below

import React from 'react';

import CheckBoxEXP from './Components/CheckBoxEXP'

function App() {

  return (

    <div>

      <CheckBoxEXP/>

    </div>

  );

}

export default App;

Output: