Strategy pattern with React component

user_14054717 0
Viewed 2583

I'm trying to use the strategy pattern inside a react component to render different functions instead of using a switch case just for learning purposes but i'm not sure where to start.

Would it be a good way to do it?

    const renderField = () => {
        switch (field) {
            case 1:
                return first();
            case 2:
                return second();
            default:
                return third();
        }
    };

    return <div>{renderField()}</div>;
reactjs strategy-pattern
1 Answers

you would just use React children. Strategy Pattern is a way to not need to change the base component but change some behaviour dynamically from the ouside.

const MyComponent = ({children}) => <div>{children}<div>

<MyComponent><FirstComponent></FirstComponent></MyComponent>

However if you want to pass in a children based on some other values e.g 1, 2, 3.

you could create a Object that holds their Relations to the components:

const componentMap = {1: <FirstComponent/>, 2: <SecondComponent/>}

and then use it like this:

<MyComponent>{componentMap[index]}</MyComponent>
user_83506340
Related