Should I separate logic from presentation in my functional component and how to achieve that?

Hi, I read online that it’s a good practice to separate your logic from your presentation, I personally agree with this, but I’m not sure how I can achieve that?
Here is my idea, i have this Login component


and then I can write all of my logic related to that Logic component in index.js file and then call LoginForm component in order to display the form itself.

Am I on the right track? what can I do better?

Export the component/s related to login in index.js, it has meaning when node resolves files. If you’re splitting out stuff have another file/s that are just JS doing whatever you’re doing alongside the component files, import those where they’re needed in the components in that folder

thanks, but it doesn’t answer my question.

Then I’m not sure what you want, that’s an answer to your question. You asked how to seperate out the logic, I said you put the other files with other logic alongside the index file (which should be the login component), import them into there, export the component. That’s normally how things are structured if you’re putting components in their own folders: currently the structure isn’t that

  |_ SomeSubComponent.js
  |_ some-utility-logic.js
  |_ index.js
// index.js
import { foo, bar } from "./some-utility-logic"
import { SomeSubComponent } from "./SomeSubComponent";

export const LoginForm = () => (............the main component);
// somewhere else in the app
import { LoginForm } from "./LoginForm";