Help React bind/this "create-a-controlled-input" challenge

So, up till React, everything was going alright, now I’m getting frustrated and it takes me waaay to long to move on.

I was trying to solver the “create-a-controlled-input” challenge. I could not. I took a look at the solution. Here, for the first time ever, they are doing the binding inside the return method, despite the fact that the challenge says it has to be done on the constructor, anyways, it is nice to know it can be done in a different way.

On the other hand, I googled about onChange event handler for some examples, because, either I don’t remember how to use it or we haven’t seen it in the curriculum. First result, is this one (React onChange Events (With Examples) - Upmostly). So here the guy does not even use the keyword this. Now I’m completely confused. The important question on this topic is: What is going on? Is that post wrong? how come that he does not even use .this a single time? Am I missing something? Hope you can give me an insight, because I am completely lost and frustrated by this point :pensive:.

The blog you posted isn’t wrong, but they’re using a different way to write React.

In React, you can have class-based components and functional components. The former are a bit outdated, the latter are the most common nowadays, because they’re easier to write (no binding, no “this”).

The FCC curriculum teaches only (mostly?) class-based components, because at the time that the curriculum was created, there was no way in React to have state in a functional component. Those are a newer feature.

So to sum it up - don’t despair. Just remember that if you google a React problem, pay close attention whether they’re using a class or a function.

2 Likes

Thanks @jsdisco , that’s what I needed to hear. And it also explains why when I installed react I got the starting code as function and not class. I thought class was the newest one and it got confusing. It’s a pity that the curriculum is already outdated.

2 Likes

Frameworks and libraries are always changing so it is tough to constantly update the curriculum.

But there is a whole new project based curriculum that is in development.

So the curriculum is currently being updated. It will just take a while before the final product is ready.

3 Likes

Hey there, just to weigh-in here:

Something important to keep in mind with coming across the outdated content within the curriculum is that, in any existing, real-world job, you are going to come across this, or even older.

Pre-python content, everything taught in the curriculum is used in the freeCodeCamp platform codebase. So, as an example, many/most of the React within the codebase consists of class-components.

Absolutely, you need to learn the current/up-to-date content for potential tools you might use in industry, but do not be deceived in thinking learning ‘outdated’ content is useless/waste-of-time.

Personal example: jQuery is being phased out. I refuse to write new jQuery code, because native JS has IMO superseded jQuery, now. However, I am glad I learnt jQuery, because I come across it so often, and need to read it, and I also transpile it (into native JS).

Yes, it would be excellent, if the current fCC curriculum contained the newer versions of the tools. Unfortunately, it is a scope issue - in that there is no scope.

Otherwise, take time to have a peruse of the work being done on the next version of the curriculum linked by @jwilkins.oboe to get an idea of the updates, and the expansions.

I encourage you to keep learning outwith specific curricula - READ-SEARCH-ASK.

Hope this helps

2 Likes

Of course it’s confusing at first. I think in the special case of React/FCC, you’ll have to decide whether you want to continue with the curriculum and learn class-based components (@Sky020 has a point, those are still in many code bases), or if you pick a different resource for learning contemporary React with functional components (there’s a lot on YT and I think even FCC videos, just no curriculum), and only start learning class components if you really have to (because your job and the code you’re working with there demands it). I’d recommend the latter, but that’s ultimately your choice, and learning “freestyle” can be more challenging, because you don’t get an immediate feedback “yes your code is correct” like you do in a curriculum.

But maybe just being aware that there’s two “ways” in React has already armed you with what you need to efficiently search for solutions, regardless of which way you go.

1 Like

I understand the value of knowing how to , at least, red older versions of code. But since this migth not be the first time a post about this has been written, it would be really nice just to put a nice warning or headsup, on the lesson. Learning this topics can be confusing, and sometimes what may seem to be a natural conclusion for someone, may not be for another one. Thanks for your reply @Sky020

1 Like

Is the current curriculum of React is already version 7.0?

Hi @its_rawaa !

The FCC version 7.0 is not live yet.
The projects are still being built and tested.

1 Like

Alright. Thanks for replying!