Best way to read in data and still conform to JS syntax?

Hello, I am having trouble reading in data as it was given to me on an XLS file (and cannot be changed) and then using that data to build objects and arrays in JS to be manipulated for data visualization.

See code here: https://codesandbox.io/embed/my-app-wqiim

Parent component = readData.jsx
Child component = barChart1.jsx

In parent component, countAllHHData goes through every row in XLS sheet and picks off the data for 4 columns. Depending on the value in that column (for that row), a counter is added. So in the end, the function returns 4 objects that show the totals for each value for each of the 4 columns.

The problem is that some of the values (as they are listed in XLS) do not fit the required JS syntax. For example, under home-ownership, there is a value called, “GIVEN BY GOVERNMENT”. Well, in order for it to be a valid key in a JS object, it has to have underscore or have spaces removed with camel case. But if I did that, then the code would not find any columns with that value (precisely b/c they do not exist like that in XLS file).

So - how do I bridge this gap between what I have to read in from XLS and the JS object I want to build? I would like to avoid lengthy for loops, if possible.

Thank you!

Thanks @camperextraordinaire!

I read in the data as they are defined in XLS file (as you suggested). Then I renamed the Object Key in the child component so I could neatly create constants via desctructuring.

New code here: https://codesandbox.io/s/my-app-tvlds?fontsize=14

If anyone has more feedback or a better way, please let me know!

Thanks again!