How to filter array with Hooks?

Question

I am currently working on a class-based function. Trying to convert the class to a stateless function, followed by refactoring my code for each event handler from this.SetState to useState (in this case setMovies).

This is my code (partial code):

const Movies = () => {
    const [movies, setMovies] = useState(getMovies());
    const [disabled, setDisabled] = useState(true);
    const [pageSize, setPageSize] = useState(4);

const sortBy = sortType => {
    setMovies(movies.filter(sortType));
    setDisabled(false);
    // this.setState({
    //     movies: this.state.movies.sort(sortType),
    //     isDisabled: false,
    // });
};

it seems that It is not possible to filter this state. I am able to change to boolean but can't filter my Array. Is there a way to filter using Hooks?

Thanks in advance.

.filter and .sort are two different functions... you should use .sort even if you are using hooks — Vencovsky
– Vencovsky, Commented Jun 13, 2019 at 19:07
it seems that It is not possible to filter this state please giva an example of how this isn't working. — Vencovsky
– Vencovsky, Commented Jun 13, 2019 at 19:09
Anyway solved forgot to remove this because it will not work inside a stateless function. — user10408806
– user10408806, Commented Jun 13, 2019 at 19:16

Dupocas · Accepted Answer · 2021-06-15 20:20:49Z

13

Nothing changes...

const List = () => {
    const [items, setItems] = useState([1, 2, 3, 4, 5, 6])
    const filterEvenResults = () => setItems(items => items.filter(x => x % 2))
    return (
        <div>
            {
                items.map(item => <p key={item}>{item}</p>)
            }
            <button onClick={filterEvenResults}>Filter</button>
        </div>
    )
}

edited Jun 15, 2021 at 20:20

answered Jun 13, 2019 at 19:18

Dupocas

21.5k7 gold badges44 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

How to filter array with Hooks?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related