Not sure how to reorganise React Components in app

Hello, A couple of weeks ago I started a little project, I was learning node/express/mongo and I though it was a good idea to start building some app so at least I could refresh my basic React knowledge.

The App is just something to keep track of your weight, something not too complicated. You can tell that the main/only Component was Weightlogger.jsx until not that long ago.

Then I learned on the node course how to organise data so I wanted to make a multi user app with logins etc…
I learnt the basics of react-router so I could protect Weightlogger from people not logged in.
(I know you can do that without react-router but I though it was a good excuse to learn a bit of it)

I assumed the Login component had to do post requests, so I supposed it had to be a component with state.

Then I realised that the Registration component is going the same way… but then I remember that it is not a good idea to have too many different states running in the app.

So my question is , should I move the states to a main Component… maybe App.js and make the others components functional? I was going to start doing that. But I did not even know how to start.

Or maybe it is about time to learn something like Redux or the Context API?

Well if you are curious to look at the App, it is here…

and the server if case you are extra curious is here…

Hi,
A small app like this is not going to cause you problems with state.
Besides, your the login/reg form data is local only to that component, and I think react team endorses this practice to keep form data/state bound to such components.
Redux for such a small project would be an overkill, but it will never hurt to learn, because it is so widespread.