Multiple modes in React component?

Question

JavaScript

Good afternoon! Please tell me how to correctly create several modes in react / redux. For example, while I have two modes in the component, and when I switch between them, it turns out that I need to write if (mode == ...) {...} in the functions and it turns out a lot of such if, it doesn’t look very good.
How to properly organize the code in this case, create different components? then duplication of functions in them turns out.
Thank you!

Answer 1

In the react world, it is customary to make higher-order components (HOC, higher-order component): take out the changing parts in separate components and pass them to a wrapper that will call them in the right place.
If the component is stateful, i.e. written as a class, you can also use good old inheritance.

Answer 2

create a separate js file and put the functions you need there. And in the component, if necessary, import them. So you get rid of code duplication.
If you don't like how if looks like use switch.