Safari TypeError or browser bug with React website

Question

I am creating a dashboard website using React. I have been testing it on different browsers, and it works fine with Firefox, Chrome and Edge. However, when I try to open it in Safari, it is throwing an error.

The case is as follows: the user accesses the Summary page, where some overview charts are generated. In that page, the user can select an option to filter the "partition" for the Summary, thus generating only the charts about that given partition. However, when selecting the partition in Safari, the parameters turn out to be undefined.

This is the code where I pass the parameters to generate the charts. The 'All' option generates charts for every partition. As you can see, I am passing the data and partition in the <Charts /> component.

{partition !== 'All'
          ? <><h2 className={classes.title}>{partition}</h2>
            <Charts data={chartData} partition={partition} /></>
          : <>{partitionItems.filter(el => { return el !== 'All' }).map(ptt => {
            return <>
              <h2 className={classes.title}>{ptt.charAt(0).toUpperCase() + ptt.slice(1)}</h2>
              <Charts data={chartData} partition={ptt.toLowerCase()} />
            </>
          })}

When I receive the parameters in the <Charts />, I need to do some manipulation.

let temp = partition.toLowerCase();

const [usageLabels, usageValues] = parseSummaryData(data[temp]["usage"])

And then it throws TypeError: undefined is not an object (evaluating 'data[temp]["usage"]'), which does not make sense because it works fine on every other browser.

I thought maybe Safari was not compatible with React somehow, but from what I saw in their documentation they do support the browser.

Any help is deeply appreciated! Thank you!

Answer 1

I ended up being able to figure out what was going on. Apparently in Safari, whenever I selected a partition from my 'partition filter' (combo box), I would change the partition state with setPartition(event.target.innerText).

The problem in Safari is that it would append a return character '↵' at the end of the partition string, while in the other browsers it would not. This character did not appear whenever printing the string, but I found it out by printing the string length. That was the reason the comparisons were not working!