Filter and Map over the same array in React

Question

I have the following component:

function Params(props) {

    const { Parameters } = useFetchParams();

    return (
        <div className='Params'>
            {
                Parameters && Parameters.map(parameter => {
                    const { Name, Value } = parameter;
                    if (Name.includes(props.filter)) {
                        return (
                            <div className='Param' key={Name}>
                                <p>{Name}</p>
                                <p>{Value}</p>
                            </div>
                        )
                    }
                })
            }
        </div>
    )
}

I want to only display "Parameters" that include the text I'm passing in from props. You can see I'm currently using an if statement for this, and it seems clunky. I'm wondering if it's possible to map and filter over this array at the same time.

I've tried sticking filter at the end of the map but it returns an error.

Thanks for looking

You don't really need extra loop for .filter() you may still use a single .map() that returns conditionally either your JSX or null/false/undefined that will get ignored on render — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Aug 16, 2020 at 21:31
What error are you getting? and also have you tried console logging the value of props.filter? — C Williams
– C Williams, Commented Aug 16, 2020 at 21:35
@DonJuanEco as a side note, if you find you're both filtering and mapping an array, then you might want to use .reduce. It can do both of those at the same time. — Jayce444
– Jayce444, Commented Aug 16, 2020 at 23:43

JayCodist · Accepted Answer · 2020-08-16 21:31:32Z

3

Like @Yevgen Gorbunkov suggests, what you're doing is fine, filtering before mapping is actually not faster, although it is perhaps, more readable. But yes, it is possible to do that. Like this:

function Params(props) {

    const { Parameters } = useFetchParams();

    return (
        <div className='Params'>
            {
                Parameters && Parameters.filter(parameter => parameter.Name.includes(props.filter))
                  .map(parameter => {
                    const { Name, Value } = parameter;
                    return (
                        <div className='Param' key={Name}>
                            <p>{Name}</p>
                            <p>{Value}</p>
                        </div>
                    )
                })
            }
        </div>
    )
}

answered Aug 16, 2020 at 21:31

JayCodist

2,5843 gold badges15 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

Filter and Map over the same array in React

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