CODEWITHSUNDEEP
javascriptarraysreactjsecmascript-6
WDP
WDP

Reputation: 295

How do I render ReactJS component with filtered props?

I've made a filter where I check if some string is equal to the category described as a property in an array(work props). This array is a restAPI object with postitems from Wordpress. What I wan't to achieve is straight forward I think. For visualising my filter I used a pre-fab solution from React-select node_module to show my filters.

Approach

If my (react-select) dropdown filter is not selected or the page is just mounded, it should show a full list with posts. Else if I select an option from the dropdown filter e.g 'UX design' It should show a filtered list with post items categorized with 'Ux design'

I created the below functional example where I check if the dropdown(react-select) is selected with a filter or not. Unfortunately when I select the react-select dropdown and filter trough the original prop 'work' I do not get back a rendered list but a warning. What mistake do I make here? 

render (){
            const { work } = this.props;
            const { selectedOption } = this.state;

            return selectedOption === null ? (
            <RenderOverview work={work} />
            ) : (
            <RenderOverview
                work={work.map(value => {
                    let type = value.pure_taxonomies.types[0].name;
                    if (type === selectedOption.label) {
                        return value;
                    }
                })}
            />
           );

}

In my console I got back after running the script.

47:42  warning  Expected to return a value at the end of this function array-callback-return

Upvotes: 0

Views: 111

Answers (1)

junwen-k
junwen-k

Reputation: 3654

You are using map instead of filter, if you did not return something in your map function, it will return undefined as your item in your new array.

You can write your render as the following, you always return <RenderOverview> component, and if there is a selected option, filter your work based on the selected option, otherwise use back the original work list.

return (
    <RenderOverview
        work={selectedOption ? work.filter(value => value.pure_taxonomies.types[0].name === selectedOption.label) : work}
    />
);

Upvotes: 1

Related Questions