React dynamic components from JSON object

Question

I'm searching for a shorter version to iterate through components from a JSON object ["Component1", "Component2", "Component3"] The Index should be the step number and the component should be outputted dynamically. Right now I have a static way, which will become very uncomfortable with more elements:

        <div">
            {step === 1 && <Component1 />}
            {step === 2 && <Component2 />}
            {step === 3 && <Component3 />}
        </div>

Does anyone knows a solution to this one?

Best regards!

What does the JSON object look like? Is the property like { components: [Component1, Component2, Component3] }? — Jayce444
– Jayce444, Commented Sep 22, 2020 at 7:11

Dennis Vash · Accepted Answer · 2020-09-22 07:07:09Z

1

You can use an array or an object to map key to its value (the indexes are keys here):

const components = [<Component1/>,<Component2/>,<Component3/>]
<div>{components[step]}</div>

The above components invoked in the array (meaning, although only a single component used, all elements called React.createElement) , to resemble the conditional rendering save a function component instead:

const functionComponents = [() => <Component1/>, () => <Component2/>,() => <Component3/>]
const Component = functionComponents[step];
<div><Component/></div>

answered Sep 22, 2020 at 7:07

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React dynamic components from JSON object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related