I dont understand what I am doing wrong here. I am using Immutable.js
& React
in my app. I am calling Immutable.js's filter
function to refine the collection based on the if
condition & return array of React components.
Its actually return 'svgTemplateState' instead of the React component collection.
let getUpdatedTem = ( renderType, svgTemplateState ) => {
switch( renderType ){
case( "Template Selection" ):
return( svgTemplateState.filter(( templateType ) => {
if( templateType.get( "templateNo" ) > -1 ){
let temType = templateType.get( "type" );
return(
<TemplatePath
temData = { templateType }
key = { temType } />
);
}
}));
case( "Preview" ):
...
Immutable filters should return a boolean, indicating whether or not you want the template to be a part of the collection that you are returning. In your case, you're returning a React component.
You're iterating svgTemplateState
, which appears to be a Map (it's not entirely clear to me what it is). What you should be iterating is a collection of templates, and check the template number on each template within the collection. You'd have something (simplified) like:
let newCollection = templatesCollection.filter( template => template.get( "id" ) > -1);