Composants de rendu Dinamiquement à partir d'une carte Immutable.js

Question

Pour gérer mon état de redux immuable, j'ai besoin de lire un état Immutable et de rendre les composants basés sur celui-ci.

Voir ce code de webpackbin

Mon code actuel est assez long, mais qui résume ce pourrait être quelque chose comme ceci:

import React from 'react' 
import {render} from 'react-dom' 
import {fromJS} from 'immutable' 
import Filters from './Filters' 


const data = fromJS({ 
    Filter1: ['english', 'french', 'spanish'], 
    Filter2: ['small', 'big'] 
}) 

render(<Filters filterMap={data} />, document.querySelector('#app')) 

je dois rendre tous les filtres, donc je l'ai lu paramètres filterMap et essayer de rendre dinamically des éléments comme je l'ai lu:

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

const filters = { Filter1, Filter2 } 

const Filter = ({ filterMap }) => (
    <div> 
    { filterMap.entrySeq().forEach((item) => { 
     const FilterElement = filters[item[0]] 
     console.log('item0: ' + item[0]) 
     console.log('item1:' + item[1]) 
     console.log (FilterElement) 
     return <FilterElement /> 
    }) 
    } 
    </div> 
) 

export default Filter 

Cependant, je reçois seulement un nombre '2'. Aucun composant le rendu des :-(

je devrais obtenir quelque chose comme (valeurs de retour des composants filtre1 et Filter2):

<h1>This is filter1</h1> 
<h1>This is filter2</h1> 

Code Filter1 et Filter2:

import React from 'react' 

function Filter2() { 
    return (
    <h1>This is filter2</h1> 
) 
} 

export default Filter2 

Answer 1

Utilisez la fonction map place de forEach:

{ filterMap.entrySeq().forEach((item) => { 
// change to: 
{ filterMap.entrySeq().map((item) => { 

Carte est utilisé pour créer une nouvelle liste à partir de la liste précédente en transformant chaque élément en l'élément renvoyé par la fonction fournie. D'autre part, forEach n'a pas de valeur de retour et donc rien n'est rendu.