Getting error while showing hiding React Table columns - React JS

Question

I am working on React Table. I am basically a beginner in React. I have a dashboard page where I display a React Table of 8 columns. I have a customize button which will open a popup page, this popup page has 8 check boxes allows me to show/hide those React columns. Initially all the check boxes in this popup page is set to true. When I uncheck a column that particular column get disabled.

There are images in the end to see what I am trying to do.

I will be using this logic for show hide columns (this question was asked by me two days back) - How to show and hide some columns on React Table?

The React Table data is like this

const columns = [
 {
    Header: 'Column 1',
    accessor: 'firstName',
  },
  {
    Header: 'Column 2',
    accessor: 'firstName',
  },
  {
    Header: 'Column 3',
    accessor: 'firstName',
  },
  {
    Header: 'Column 4',
    accessor: 'firstName',
  },
  {
    Header: 'Column 5',
    accessor: 'firstName',
  },
  {
    Header: 'Column 6',
    accessor: 'firstName',
  },
  {
    Header: 'Column 7',
    accessor: 'firstName'
  },
  {
    Header: 'Column 8',
    accessor: 'firstName',
  }
];

The start of the dashboard page

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
          filterState: {},
          searchText: '',
          isFilterOpen: false,
          isCustomizedOpen: false,
          isFiltered: false,
          isSearched: false,
          searchedTableData: [],
          filteredTableData: [],
        };
         this.handleCustClickinv = this.handleCustClickinv.bind(this);
    }

This is my code in the render function of my dashboard page for showing the customize button (this is written in parent dashboard page)

{this.state.isCustomizedOpen && <CustomizedView
          filterState={this.state.filterState}
          applyFilter={(values, clear) => { this.applyFilters(values, clear); }}
        />}

This is the code for the customize button (this is written in parent dashboard page)

<div className="custom-div-dashboard" onClick={() => { this.handleCustClickinv(); }}>
            <div className='customize-view-dashboard'>Customized View </div>
          </div>

This is function to handle the click on customize button (this is written in parent dashboard page)

handleFilterClickinv() {
    if(this.state.isCustomizedOpen) {
      this.setState({ isCustomizedOpen: false });
    }
    const currentState = this.state.isFilterOpen;
    this.setState({ isFilterOpen: !currentState });
  }

This is my entire popup page which will have 8 check boxes

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { ActionCreators } from '../../../actions';
import './enqCustomizedView.scss';
import ButtonComponent from '../../shared/button/ButtonComponent';
import { CheckBox } from '../../shared/chkbox/CheckBox';

class CustomizedView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        { id: 1, value: 'Column 1', isChecked: true },
        { id: 2, value: 'Column 2', isChecked: true },
        { id: 3, value: 'Column 3', isChecked: true },
        { id: 4, value: 'Column 4', isChecked: true },
        { id: 5, value: 'Column 5', isChecked: true },
        { id: 6, value: 'Column 6', isChecked: true },
        { id: 7, value: 'Column 7', isChecked: true },
        { id: 8, value: 'Column 8', isChecked: true },
      ]
    };
      this.handleCheckChildElement = this.handleCheckChildElement.bind(this);
  }

  handleClick() {
    this.setState({ isChecked: !this.state.isChecked });
  }

  handleCheckChildElement(event) {
    //let items = this.state.items;
    let { items } = this.state;
    items.forEach(items = () => {
      if(items.value === event.target.value) {
        items.isChecked = event.target.checked;
      }
    });
    this.setState({ items });
    const column1checked = items[0].isChecked;
    console.log('column1checked ' + column1checked);
    const column2checked = items[1].isChecked;
    console.log('column2checked ' + column2checked);
    const column3checked = items[2].isChecked;
    console.log('column3checked ' + column3checked);
    const column4checked = items[3].isChecked;
    console.log('column4checked ' + column4checked);
    const column5checked = items[4].isChecked;
    console.log('column5checked ' + column5checked);
    const column6checked = items[5].isChecked;
    console.log('column6checked ' + column6checked);
    const column7checked = items[6].isChecked;
    console.log('column7checked ' + column7checked);
    const column8checked = items[7].isChecked;
    console.log('column8checked ' + column8checked);
  }

  render() {
    return (
      <div className='popup-page-custom' >
        <div className='bottomBar'>
          <ButtonComponent
            text='Apply'
            className='activeButton filterMargin'
            width='100'
            display='inline-block'
            onClick={() => { this.props.applyFilter(this.state, false); }}
          />
          <ButtonComponent
            text='Clear Filter'
            className='greyedButton clear-filter'
            width='100'
            display='block'
            marginTop='60'
            onClick={() => { this.props.applyFilter(this.state, true); }}
          />
        </div>
        <div>
          <div className='data-points-text'>
            <span> Columns </span>
          </div>
          <div className="App">
            <ul>
              {
                this.state.items.map((item, i) => {
                  return (<div key={i} ><CheckBox handleCheckChildElement={this.handleCheckChildElement} {...item} /></div>);
                })
              }
            </ul>
          </div>
        </div>
      </div>
    );
  }
}

CustomizedView.propTypes = {
  applyFilter: PropTypes.func.isRequired
};

CustomizedView.defaultProps = {
};

function mapStateToProps(state) {
  return {
    auth: state.auth
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(ActionCreators, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(CustomizedView);

And ultimately this is my checkbox page

import React from 'react';
import PropTypes from 'prop-types';

export const CheckBox = (props) => {
  // super(props);
  return (
    <li>
      <input key={props.id} onClick={props.handleCheckChildElement} type="checkbox" checked={props.isChecked} value={props.value} /> {props.value}
    </li>
  );
};

CheckBox.propTypes = {
  id: PropTypes.string,
  handleCheckChildElement: PropTypes.func,
  isChecked: PropTypes.bool,
  value: PropTypes.string,
};

CheckBox.defaultProps = {
  id: '',
  handleCheckChildElement: null,
  isChecked: null,
  value: '',
};

export default CheckBox;

This is a very basic (ugly) style of my dashboard page and popup page

This is the error I am getting on Chrome when unchecking the checkboxes

Edit 1 - As per Alireza Yadegari's suggestion, I made a 1 line change. But I am still getting 2 errors.

Edit 2 - As per Alireza Yadegari's suggestion, I applied console.

Alireza Yadegari · Accepted Answer · 2018-12-07 16:57:14Z

0

you have to use this piece of code in your constructor

this.handleCheckChildElement = this.handleCheckChildElement.bind(this)

answered Dec 7, 2018 at 16:57

Alireza Yadegari

3051 silver badge11 bronze badges

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

14 Comments

user10374052 Over a year ago

I have updated the question - after inserting this line and trying to uncheck the check boxes, I am getting 2 errors, the previous error is not there, there are 2 new errors, see the last 3 screenshots

Alireza Yadegari Over a year ago

what is your result when you try to use console.log(items) and console.log(this.state) in your method?

user10374052 Over a year ago

My intention is that - there is a react table property called show: true. Default value of all columns is true, but wecan make it false by show: false. I am following this question (instead of making check boxes on the dashboard page , I need to make check boxes on the popup page and I am storing values of every constants in popup page and I need to transfer those constant values to the React Table Page (which is again imported & rendered in the parent dashboard page. You may check this and help me - stackoverflow.com/questions/53638095

Alireza Yadegari Over a year ago

@Scooby do you have any porpose to use let { items } = { ...this.state }; instead of let items = this.state.items;

user10374052 Over a year ago

it was giving errors - Someone on stack gave me this solution - stackoverflow.com/questions/53657372

|

score 0 · Accepted Answer · 2018-12-07 17:56:14Z

0

let { items } = { ...this.state };

this is wrong .... firstly you destructuring array to object then saying give me items prop from given object... of course this is wrong

const { items} = this.state;

takes items prop from the state

and finally.... implement your task with foreach is bad idea...

CheckBox.defaultProps = {
   id: '', 
   handleCheckChildElement: null,
   isChecked: null, value: '', 
};

i don't understand what it does. you know?

edited Dec 7, 2018 at 17:56

answered Dec 7, 2018 at 17:19

user10334760

7 Comments

user10374052 Over a year ago

Got this error 36:19 error 'items' is constant no-const-assign

user10334760 Over a year ago

try with let ` let {items} = this.state`

user10374052 Over a year ago

Please check the defaultprops and proptypes of the checkbox page. I am concerned whether any type mismatch is happening

user10374052 Over a year ago

Getting 2 errors. Error 1 - Uncaught TypeError: Cannot read property 'isChecked' of undefined. Error 2 - Uncaught TypeError: this.state.items.map is not a function.

user10334760 Over a year ago

id: PropTypes.string id is not string it is number replace like this id: PropTypes.number

|

Alireza Yadegari · Accepted Answer · 2018-12-07 18:39:44Z

0

I think your project is a sample and no need for further examples. I just say about your mistakes.

first, when you are using methods it is good to use 'bind(this)' to show react where is the method belongs.

secondly, when you are using state, react just allows you to change it in the constructor and wherever you want to change it you have to use 'setState' method (you can read the reason for this in react documentation).

finally, if you have an array in your state you have to get an array in some temp object change the temp object and then apply changes with 'setState' method. if you have more question please feel free to ask.

answered Dec 7, 2018 at 18:39

Alireza Yadegari

3051 silver badge11 bronze badges

Collectives™ on Stack Overflow

Getting error while showing hiding React Table columns - React JS

3 Answers 3

14 Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

14 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related