How do i filter an array in react native?

Question

I am new to react native and have a situation where I am trying to set a state to a filtered version of another state(array). With the current code, each item in the unfiltered array is being changed to the filtering condition. How can I setFilteredJobs to only contain 'jobs', where status equals the status that the user has chosen in the AppPicker?

Here is my code:

const [jobs, setJobs] = useState()
const [filteredJobs, setFilteredJobs] = useState()
const [status, setStatus] = useState()


    const handleStatusChange = (item) => {
        setFilteredJobs(
            jobs.filter( job => job.status = item.label )
        )
        setStatus(item)
    }

return (
        <View style={defaultStyles.screenNoPadding}>
            <AppTextInput placeholder='Search for a Job' icon='magnify' />
            <View style={styles.filterContainer}>
                <AppPicker 
                    color='white'
                    selectedItem={category}
                    onSelectItem={item => handleCategoryChange(item)}
                    items={categories} 
                    placeholder='Filter' 
                    icon='apps' />
                <AppPicker 
                    color='white'
                    selectedItem={status}
                    onSelectItem={item => handleStatusChange(item)}
                    items={statuses} 
                    placeholder='Status' 
                    icon='apps' />
            </View>
            <FlatList 
                style={styles.list}
                data={filteredJobs ? filteredJobs : jobs}
                keyExtractor={job => job.id.toString()}
                renderItem={({ item }) => (
                    <ListItem 
                        company={item.company}
                        position={item.position}
                        status={item.status}
                        onPress={() => navigation.navigate('Details', { item })} 
                    /> 
                )} 
               ItemSeparatorComponent={ListItemSeparator} 
            />
        </View>
    );

Thanks in advance! Keep in mind jobs is fetched in a useEffect on loading the component.

In the future it will help you if you log out the items with console.log before and after the filtering. The answer would have been more obvious if you had done that. — jcollum
– jcollum, Commented Sep 8, 2021 at 15:36

Guilherme Meinlschmiedt Abdo · Accepted Answer · 2021-09-08 15:35:05Z

1

It is because you should use a comparison, and not an attribuition.

    const handleStatusChange = (item) => {
        setFilteredJobs(
                                        // FIX HERE, USE == INSTEAD OF =
            jobs.filter( job => job.status == item.label )
        )
        setStatus(item)
    }

answered Sep 8, 2021 at 15:35

Guilherme Meinlschmiedt Abdo

7411 gold badge7 silver badges22 bronze badges

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

1 Comment

wezrine Over a year ago

Thanks! Tried that before but I guess I didn't do it right!

jcollum · Accepted Answer · 2021-09-08 15:40:50Z

1

@guilherme is right, it's a simple mistake, you assigned instead of comparing. Get in the habit of using === to compare strings.

Also the way to tackle these problems in the future: console.log before and after the thing you are doing that isn't working. It would have jumped out at you pretty quick if you had. Use JSON.stringify for logging of objects if you are getting [Object object] in the logging output.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

edited Sep 8, 2021 at 15:40

answered Sep 8, 2021 at 15:34

jcollum

47k64 gold badges212 silver badges347 bronze badges

Collectives™ on Stack Overflow

How do i filter an array in react native?

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related