Bad practice? Same variable names in props and event handlers

Why does Codecademy teach what has to be a bad practice… naming their prop names the same as their event handler? It confuses the student as well as not best practice, right?

If this is something commonplace in the industry, it would still be better to teach with separate names and THEN introduce the bad news of lazy programmers so as to spread out the confusion. Am I crazy?

I think the issue is that you often need to pass props down a chain of multiple nested components. If you used different names for the attribute name and the props name, then you’d have to create a new name every time you move down a level. This is because you effectively lose the attribute name every time you move down a level because it becomes part of the props.

Imagine that the following three components are nested:

<Parent talk={talk} />
<ChildOfParent talk={} />
<ChildOfChild talk={} />

It’s quite easy to see that the same prop is being passed from parent to grandchild.

Now let’s do the same thing but we’ll choose a different name for the attribute and prop name:

<Parent talk={speak} />
<ChildOfParent makeWords={} />
<ChildOfChild verbalize={props.makeWords} />

Giving them different names, while sounding like good practice on a surface level, ends up mangling your code and obscuring

That may be easy to see when you put them right next to each other in subsequent lines, but what if they are in different files? I mean, from a student perspective it is hard enough to learn these concepts. If one were teaching this, what is the answer when someone asks: What is the value of talk? Maybe a teacher would know to not ask this, but, I, the student questioning everything, am.

What happens when a person takes over an existing code at a new job. If these props are coded improperly, and the value talk is getting an error, and, as said before, these props are in different files, it would further seem that tracking down the code would be harder since if again, I am a student you were maybe able to search the code by the word “talk”, it would come up thrice the number of appearances had there been 3 separate variable names.

What is the value of talk?

The value of a props attribute is determined at the parent level. You only need to to look at the first time it is defined: when rendering the outermost component that recieves the prop. All of the nested children will automatically recieve the same value. Provided the children are coded correctly… which leads to your next question.

Thankfully, React provides helpful stack traces when you have errors in the code. The browser console will tell you in which component it encountereed the error and which line the error begins on. So if you coded a mistake in the middle of a long chain of the same prop being passed down, the error message in the console will tell you exactly where to find it.

I’m not trying to dismiss what you are saying. Passing props down long chains of nested components is a pain point of React. It is one of the main reasons that the Redux library was made and is often used by React developers.

1 Like

Thanks for that knowledge. Working on the website with React and not on VS Code or actual spaces doesn’t tell me about the error code line help. I have worked with JS and had that helper info, I guess that should have been apparent in other code. Codecademy is trying to give nibbles sometimes when it definitely needs more meals.

The whole family tree stuff could have a chapter… when is something a parent and when is something merely nested inside something else? Anyhow, for another day, I suppose.