Update/reset state with existing one - ReactJs

Question

I have quite an head scratcher here. I have some check boxes. After check box is selected you are abble to download a document based on the selected checkbox. After my download is completed i disable my checkbox, but still it is marked as checked. UI wise i inform the user that this section is downloaded. But if a user selects another checkbox from the same page the previous one is enabled again ( so it is not disabled anymore ). My question is how can i update or reset my state in order to have all check boxes disabled and download only the documents that are selected at the moment and not the previous ones.

   constructor(props) {
    super(props);
    this.state = { docList: {} }

after that this is my function to handle the checkboxes:

    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 is my axios.post method:

    axios.post(SERVER_URL + '/api/user/bills/zip', postZipData, axiosZipConfig)

        .then((response) => {
            this.setState({
                downloadedIDS: response.data.downloadedIds,
                docList: this.state.docList
            })    e.preventDefault();

and the render:

const { downloadedIDS, docList } = this.state;

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

The result is this:

Any advice is welcome how should i treat my code.

Answer 1

In this section...

.then((response) => {
            this.setState({
                downloadedIDS: response.data.downloadedIds,
                docList: this.state.docList
            })    e.preventDefault();

It seems you're overwriting downloadedIds with the IDs from the response that's just returned. If I understand correctly, it seems like you should append the IDs from the response to the existing state of downloadedIds .

Assuming downloadedIds is an array here is how you can achieve this using the array spread operator .

this.setState({
    downloadedIds: [
        ...this.state.downloadedIds,
        ...response.data.downloadedIds
    ]
})

There is no point in setting docList state to equal this.state.docList that will just set the state to equal the same thing, so it's not required.

Hope this helps, let me know if I can go into any more detail.