Checkbox conditional rendering after action is performed - ReactJS

Question

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

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.

@ShivratnaKumar after the response from the back end . Or from my side when the download button is clicked and user recieves the ZIP i want to disable the downloaded documents ( or the previously selected i should say ) — PandaMastr
– PandaMastr, Commented Nov 18, 2019 at 8:38

Shivratna Kumar · Accepted Answer · 2019-11-18 10:43:45Z

2

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}
/>

edited Nov 18, 2019 at 10:43

answered Nov 18, 2019 at 8:42

Shivratna Kumar

1,3111 gold badge8 silver badges19 bronze badges

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

6 Comments

PandaMastr Over a year ago

I'm afraid that this will not help me at all . Because the app is crashing after this change.

PandaMastr Over a year ago

Invoices.js:585 Uncaught TypeError: Cannot read property 'length' of undefined

Shivratna Kumar Over a year ago

@PandaMastr I have updated my answer {downloadedIDS && downloadedIDS.length ? true : false}, please check.

Shivratna Kumar Over a year ago

@PandaMastr I have the disable condition as disabled={downloadedIDS && downloadedIDS.indexOf(rowData.documentId) >= 0 ? true : false}. Please try this.

PandaMastr Over a year ago

Update your answer so i can mark it as working . Thanks mate !

|

prasanth · Accepted Answer · 2019-11-18 10:56:09Z

1

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: []
    });
  }

edited Nov 18, 2019 at 10:56

answered Nov 18, 2019 at 8:54

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

7 Comments

PandaMastr Over a year ago

there is no need to call this.state if i have declared it after my render like const { downloadedIDS } = this.state . I got the same result all the check boxes are disabled ( no matter selected or not ) after the document is downloaded

prasanth Over a year ago

ok can you provide working sanbox to me codesandbox.io/s/new

PandaMastr Over a year ago

i have tried to create a sandbox , but it doesn't work .

prasanth Over a year ago

can you share that sandbox link

prasanth Over a year ago

your sandbox was empty.please save the code before sandbox share

|

Collectives™ on Stack Overflow

Checkbox conditional rendering after action is performed - ReactJS

2 Answers 2

6 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related