SHARE
TWEET

Untitled

a guest Mar 22nd, 2019 53 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import PropTypes from 'prop-types';
  3. import Checkbox from '..........';
  4.  
  5. export default class Test extends Component {
  6.  
  7.     state = {
  8.         allItems: [],
  9.         selectedItems: []
  10.     };
  11.  
  12.     onChange = (event) => {
  13.         const { name, checked } = event.currentTarget;
  14.  
  15.         if (checked) {
  16.             this.setState(prevState => ({
  17.                 selectedItems: [...prevState.selectedItems, name]
  18.             }));
  19.         } else {
  20.             this.setState(prevState => ({
  21.                 selectedItems: prevState.selectedItems.filter(item => item !== name)
  22.             }));
  23.         }
  24.     }
  25.  
  26.     isInSelectedItem = (id) => {
  27.         return this.state.selectedItems.includes(id);
  28.     }
  29.  
  30.     renderCheckboxes =() => {
  31.         return (
  32.             <div>
  33.                 {this.state.allItems.map(item => (
  34.                     <Checkbox
  35.                         key={item.name}
  36.                         name={item.name}
  37.                         id={item.name}
  38.                         checked={this.isInSelectedItem(item.name)}
  39.                         onChange={this.onChange}
  40.                     />
  41.                 ))}
  42.             </div>
  43.         );
  44.     }
  45.  
  46.     render() {
  47.         return (
  48.             <div>
  49.                 { this.renderCheckboxes() }
  50.             </div>
  51.         );
  52.     }
  53.  
  54. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top