React-Redux Drum Machine - Two Errors I Can't Fix

#1

Hey all,

I made my drum machine previously using just react and it rendered without any errors. However, as a means of getting to know redux and the react-redux middleware better I thought I would take the task of converting it to use the react-redux store.

After much reading to fix issues with passing the state and getting my head around the action handlers etc, I have accomplished my goal. However, there are two persistent errors on the console when I check it. They are as follows:

react-redux.min.js:1 Uncaught TypeError: Cannot read property ‘Component’ of undefined

Warning: Each child in a list should have a unique “key” prop.

The errors only ever show on the version of my app which is on my local host although the code for the linked codePen and the local version are the same.

With regards to the >key error I tried adding a key='some-random-id' tag to each mentioned element but it did not solve anything. The other error looks to me like it is something from the react-redux file itself.

I just wanted to ask as it don’t want to leave any loose ends which I should know about.

The CodePen is here: https://codepen.io/makingstuffs/full/KOGBGR

Thanks

#2

Are you using the exact same versions of all the libraries locally?

#3

No they appear to be different version - locally I am using yarn add to add the packages to the react app created with npx create-react-app. I presume the difference is that now that you mention it. But do you know what would make the errors display?

#4

With the create-react-app, when you use npm start, you are using a development version instead of a production version. The development version will show the errors. To get the errors to show in Codepen, you would need to look at the version of react and react-dom (package.lock) you are using and find the corresponding dev version cdn.

#5

Ok great to know, thanks for your help! Would you say this is something to worry about? Or is it something which is fixed when you switch from development version to a production version?

#6

I would definitely fix the issues before shipping to production. Even thought the unique “key” prop is a warning and will probably not ever be a problem in your current application, it is better to obey the warnings and fix the code. There are definitely good reasons why you want to make sure you use unique keys (and not just using the array index).

#7

Ok thanks mate I will fix the issues for sure then. How would I fix them? I tried to input a unique key on each element which is rendered by adding 'key=“something-Unique” but it still failed.

Do you have any idea what the other issue is?

#8

So it turns out I have fixed the key issue, it was a matter of adding a the key tag to the containers which I was routing through react. After solving I am getting that this is a feature to make the backend run more smoothly and not something regarding the front end. Is that correct?

Edit:

It further turns out that the other error:

react-redux.min.js:1 Uncaught TypeError: Cannot read property ‘Component’ of undefined

Was due to the fact that i forgot to remove the cloud based react-redux import from my index.html file so I guess the fact of two instances of the same codebase was causing conflict and explains why it wasn’t displaying on codepen also.

#9