Render multiple React components from conditional statements

Question

I have a definition object where depending on the ‘type’ of each form, I render a specific component. For example:

const definition = 
{
name: "test", 
id: 1,
form: [
  {type: "text"}, 
  {type: "checkbox"}, 
  {type: "radio"}]
};

So to access the form types Im just doing a simple map:

const definitionTypes = definitions.form.map ( form => form.type )

I now have an array of all the form type’s entries stored on definitionTypes and I have three components that needs to render depending on which keyword is in that definitionTypes array. So for the “text” I have a component that Im importing called <DefinitionText /> , etc.

Where Im am experiencing problems is figuring out a solution to return multiple components based on the types that are in the definitionTypes array. The end goal would be for these 3 components to render from that array:

  // if definitionTypes includes "text" then render...
  <DefinitionText />

  // also if definitionTypes includes "checkbox" then render...
  <DefinitionCheckbox />

  // also if definitionTypes includes "radio" then render...
  <DefinitionRadio />

I’ve tried using an if/else statement to push each component to a results variable then rendering that but the results variable sends back an error. Any help in getting multiple components to render based off conditions would be a huge help!

Michael · Accepted Answer · 2020-02-28 23:39:54Z

Having that defintionTypes array, the rest should be kinda straightforward... You could use a switch statement for example. Check out the snippet.

function Radio(){
  return <input type='radio'></input>
}
function Text(){
  return <input type='text'></input>
}
function CheckBox(){
  return <input type='checkBox'></input>
}
function App(){
const definitionTypes = ['text', 'checkBox', 'radio']
return <div>
  {definitionTypes.map(type => {
    switch(type){
      case 'text':
        return <Text/>
        break
      case 'radio':
        return <Radio/>
        break
      case 'checkBox':
        return <CheckBox/>
        break
      default:
        break
  }})}
</div>
}
ReactDOM.render(<App/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id='root'></div>

Reece Casey · Accepted Answer · 2020-02-28 23:26:55Z

0

Firstly build an object map of your components:

const Components = {
  foo: Foo,
  bar: Bar
};

Then access using the string for key name:

const DynamicComponent = Components[componentName];

<DynamicComponent />

Quick example using your map within a component

{definitions.form.map( form => {
  const DynamicComponent = Components[form.type];
  return <DynamicComponent />
})}

answered Feb 28, 2020 at 23:26

Reece Casey

1545 bronze badges

Collectives™ on Stack Overflow

Render multiple React components from conditional statements

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related