💡Need you help to run this code.💡

Question

The code is asking that the Contact Component is read-only. Tried my best to run but I couldn't.. please help..
https://code.sololearn.com/W78KxCky4zRh/?ref=app

Answer 1

Line 44:
function Counter(props) {

Line 68:
const Counter = connect (mapStateToProps, mapDispatchToProps) (Counter);

I am not a react expert, but there is something wrong with these definitions. First you declare a function, then you want to create an immutable variable with the same name (const keyword!)
What confuses me is you use a mix of old and new JS styles.

ES6 style function declaration, and use "let" because you want to reassign it later:

let Counter = props => {
}

Then later in the code you can reassign the variable (without let or const keyword), using React's magic...

Counter = connect (mapStateToProps, mapDispatchToProps) (Counter);

Might be useful for you to learn a bit more about the normal plain Javascript syntax, before you mess around with React and Redux.
And it seems there will be even more errors after this one is fixed.

https://stackoverflow.com/questions/50719219/react-module-build-failed-syntaxerror-is-read-only

Answer 2

Thank you for your reply but I haven't written it.. I just learned it from sololearn redux project via StackBlitz. Even I haven't copied it just from my memory.. similar to StackBlitz. Tibor Santa

Answer 3

Here is the link of StackBlitz which is referred from Sololearn Redux Project Accessing the Store https://stackblitz.com/edit/react-redux-counter-example-1?file=index.js

Answer 4

Ok I get it now.
The Sololearn web playground does have its own little annoyances. So I do not know exactly how to fix this code there.
The point is that Javascript and also each library is changing all the time. What used to work fine 3 years ago when this was written, may be broken now, because of deprecated dependencies, changing security protocols, and so on. Even the code you write today, may break tomorrow...

My suggestion for you: open the code playground, and search for "react counter". There are plenty of public codes written by others. Observe them, particularly how they wired up the script imports and how they placed the script itself. Starting out from a working example and customizing it, is easier, than finding bugs in such complex frameworks.

The hard part is that React is very lax, there are many ways you can write React code, so you will see many variations. Figuring out the best (and most modern) way can be challenging, especially if you use old training material.

Answer 5

Thank you so much as It is I've been doing it for the last few days.. 😔 thanks.. Tibor Santa