Using Filter Function to Return React Component - Code Review

Question

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" ):
...

Answer 1

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);