React: Can't perform a React state update on an unmounted component

Question

I'm trying to load some json data into my React app and make some modification to the data before using it (adding one more column with additional data to each row of dataset) in order to create a D3.js visualization. I managed to get it working and displaying in console.log, but, however, whenever I'm starting to make any changes to my app the following window with an error pops up:

I'm not sure why exactly this is happening. I tried to apply this modification helper function by adding one more 'await' to fetchUrl() function (something like await addQuarterStringsToArr(data)) or doing it with fetch API in the main component, but in all those cases I didn't get a desired dataset with an additional column.

Here is my codesandbox

Could you please let me know what am I doing wrong here? I'm quite new to React and programming in general, therefore I'm confused on how to resolve this issue.

Thank you in advance!

Answer 1

you are not returning data from addQuarterStringsToArr function that why here setData(addQuarterStringsToArr(data)) going to be undefined.

just return dataset in addQuarterStringsToArr function like this:

// helper function to add corresponding text for the quarter and year as a string
export default function addQuarterStringsToArr(dataset) {
  for (let i = 0; i < dataset.length; i++) {
    switch (dataset[i][0].substring(5, 7)) {
      case "01":
      case "02":
      case "03":
        dataset[i].push(dataset[i][0].substring(0, 4) + " Q1");
        break;
      case "04":
      case "05":
      case "06":
        dataset[i].push(dataset[i][0].substring(0, 4) + " Q2");
        break;
      case "07":
      case "08":
      case "09":
        dataset[i].push(dataset[i][0].substring(0, 4) + " Q3");
        break;
      case "10":
      case "11":
      case "12":
        dataset[i].push(dataset[i][0].substring(0, 4) + " Q4");
        break;
      default:
        break;
    }
  }
  return dataset;
}

hope this do the work.