CODEWITHSUNDEEP
javascriptreactjsconditional-statements
PandaMastr
PandaMastr

Reputation: 695

Checkbox conditional rendering after action is performed - ReactJS

In order to have my check boxes on click i get the document/box id and the document number . Like this : 

handleCheckboxClick = (e) => {
    let parsedVal = JSON.parse(e.target.value);
    let newDocList = { ...this.state.docList };
    if (e.target.checked) {
        newDocList[parsedVal.documentId] = parsedVal.documentNumber;
    } else {
        delete newDocList[parsedVal.documentId];
    }
    this.setState({
        docList: newDocList,
    }, () => {
        console.log(this.state.docList)
    });
};

After that when I do a call to the back end it returns me a pdf's which I convert into a ZIP file and after that, I automatically download them for the user. Besides that, I get the JSON response with the downloaded document ID's . My goal is to disable my check boxes when a document I downloaded. At the moment I have this : 

 .then((response) => {
            this.setState({
                downloadedIDS : response.data.downloadedIds
            })

And this is the result ouput in the console.log

enter image description here

Further more my Checkbox is treating the disable like this : 

  <Checkbox disabled ={ downloadedIDS > 0 && true }
            color='default' 
            value={JSON.stringify({documentId:rowData.documentId,documentNumber: rowData.documentNumber })} 
            onClick={this.handleCheckboxClick} />

And I end up with result that each one of the boxes no matter selected or not are disabled. So I ask myself what am I doing wrong ? Can somebody help me? Thank you.

Upvotes: 2

Views: 172

Answers (2)

prasanth
prasanth

Reputation: 22500

downloadedIDS is the state object key .SO you need call this.state.downloadedIDS

<Checkbox disabled={this.state.downloadedIDS && this.state.downloadedIDS.length > 0 ? true : false}
     color='default' 
     value={JSON.stringify({documentId:rowData.documentId,documentNumber: rowData.documentNumber })} 
     onClick={this.handleCheckboxClick}
/>

Updated

You need trigger getZip function while componentMount.Add the code on invoices.

componentMount(){
 this.getZip()
}

And remove the do string on end of response.data.downloadedIds

this.setState({
          downloadedIDS: response.data.downloadedIds
        });

And add constructor on class start

constructor(props) {
    super(props);
    this.setState({
      downloadedIDS: []
    });
  }

Upvotes: 1

Shivratna Kumar
Shivratna Kumar

Reputation: 1311

If I am getting your condition correctly, you can do something like this:-

<Checkbox disabled={downloadedIDS && downloadedIDS.indexOf(rowData.documentId) >= 0 ? true : false}
     color='default' 
     value={JSON.stringify({documentId:rowData.documentId,documentNumber: rowData.documentNumber })} 
     onClick={this.handleCheckboxClick}
/>

Upvotes: 2

Related Questions