How to check Checkbox checked in the table or not

Question

I am new to the reactjs. Here I have a component which is rendering a table. In this there are two tables that are getting rendered with different data, but using the same component, i am passing data with some props. Now, In this i have a checkbox for both the tables. Now, if user selects from first and also check from the second, and so, i want to know that weather user has selected from the one table or checked from two tables.

<td align="center" className="checkbox">
                  <input type="checkbox" name={item.resumeId} checked={!!props.parentState[item.resumeId]} onChange={(e) => { props.handleTableCheckboxChange(e, props.type, props.tableName) }} />
              <a href="#" data-toggle="tooltip" title="Recommendation" onClick={(e) => { props.getReason(e, item.jdId, item.resumeId, item.resumeName) }}><i className="fa fa-info-circle info-icon" style={props.infoIcon} aria-hidden="true"></i></a>
            </td>

So, this is the td in which I am having the checkbox.

handleTableCheckboxChange = (e, type, selectedType) => {
    this.setState({
      [e.target.name]: e.target.checked
    }, () => {
      const checkedItems = this.props[type].content.filter((item) => this.state[item.resumeId])
      this.setState({
        isCheckd: checkedItems.length === this.props[type].length ? true : false,
        isEnable: checkedItems.length > 1 ? true : false,
        isMultipleCheck: checkedItems.length > 1 ? true : false,
        movetype: type === "tracked" ? "Shortlist" : "Longlist" 
      });
    });
  }

Here, I am handling the checkbox event which is onClick of the checkbox. Here type is from which user has selected like, is it tracked or untracked section.

What I have tried is ,

this.state = { typeAdded: []  }

created a state variable as an empty array and then whenever we add any thing then this will add the what type got checked. Now, here If I console it then the when first time value is not getting added in this array,

this.setState(prevState => ({
      typeAdded: [...prevState.typeAdded, type]
    }))

So, is there any way through which I will come to know that user has checked some values from both of the tables .Thanks

The way I am trying is ,

this.state = {
  selectedType: {}  
}

 if (e.currentTarget.checked) {
      this.setState({
        selectedType: {
          ...this.state.selectedType,
          [resumeId]: type
        }
      }) else {
     //remove the property from that array
}

Here, I am confused in how to remove the property from that object without mutating the state

Answer 1

Shoube be used currentTarget.checked to checked status.

     handleTableCheckboxChange = (event, type, selectedType)=>{
        event.stopPropagation();
        console.log(event.currentTarget.checked); // will be true / false based on checked selection.
//..... rest of the code.

//create on hash object keeping the track of selected checkbox o respected table

            if(this.tableSelection[selectedType]){
               //checkbox selected from respected table
             }else{
               // not selected
             }