Render dynamic list of react components from array of strings

Question

My component is a Filter, that receives as a prop some filters, which should be rendered. However props are not rendered:

<Filter key={i}/>

Code is here: https://www.webpackbin.com/bins/-KjI4MiSjlV69O_zaOCD

Filter component:

import React, { PropTypes } from 'react'
import Filter1 from './Filter1'
import Filter2 from './Filter2'


const Filters = ({ filters }) => (
  <div>
    { filters.reverse().map((Filter, i) =>
       // React.createElement(Filter, { key: i}) does not work
       // <p>{Filter}</p> // h
       <Filter key={i}/>

    )}
    <p> This should be seen twice!</p>
    <Filter1/>
    <Filter2/>
  </div>
)
Filters.propTypes = {
  filters: PropTypes.arrayOf(PropTypes.string).isRequired
}

export default Filters

One of the filters:

import React from 'react'

function Filter1 () {
  return (
    <h1>This is filter1</h1> 
  )
}

export default Filter1

Yes, I get values from redux, so they should be serializable — user2670996
– user2670996, Commented May 4, 2017 at 12:30

cssko · Accepted Answer · 2017-05-04 12:32:15Z

2

Change Filters.js like so:

import React, { PropTypes } from 'react'
import Filter1 from './Filter1'
import Filter2 from './Filter2'

const filters = {
  Filter1: Filter1,
  Filter2: Filter2
}
const Filters = (props) => (
  <div>
    { props.filters.reverse().map((filter, i) => {
        const Filter = filters[filter];
        return <Filter key={i}/>
      })
    }
    <p> This should be seen twice!</p>
    <Filter1/>
    <Filter2/>
  </div>
)
Filters.propTypes = {
  filters: PropTypes.arrayOf(PropTypes.string).isRequired
}

export default Filters

The key change is using an object, filters, that contains keys that match up with the strings you pass in. The values are the components you want to render.

Here is the edited webpackbin

edited May 4, 2017 at 12:32

answered May 4, 2017 at 11:58

cssko

3,0551 gold badge20 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

Render dynamic list of react components from array of strings

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