Filtering an array inside an object inside an array in React

Question

I'm trying to filter an array, which is inside an object, itself inside an array in React. But it still returns the full array. How could I fix this?

This is my code:

const [allArtists, setAllArtists] = useState([])

useEffect(() => {
    axios.get("url")
        .then((res) => {
            setAllArtists(res.data)
        })
        .catch((err) => console.log(err))
}, [])

for (let i = 0; i < allArtists.length; i++) {
    allArtists[i].available.filter((date) => new Date(date) >= new Date())
}

And the array:

[
    {
        "available": [
            "2022-05-26",
            "2022-04-21",
            "2022-05-16",
            "2022-09-16",
            "2022-06-21",
            "2022-08-19",
            "2022-11-14",
            "2022-08-20",
            "2022-09-29",
            "2022-03-22",
            "2022-11-02",
            "2022-05-03",
            "2022-11-07",
            "2022-01-11",
            "2022-01-12"
        ]
    },
    {
        "available": [
            "2022-09-09",
            "2022-08-03",
            "2022-01-20",
            "2022-09-04",
            "2022-07-17",
            "2022-04-07",
            "2022-08-17",
            "2022-06-19",
            "2022-04-12",
            "2022-05-27",
            "2022-03-12",
            "2022-02-5",
            "2022-04-18",
            "2022-01-19",
            "2022-05-10"
        ]
    }
]

I also tried to put the for loop inside another useEffect, but it wasn't working either...

Thanks for your answers!

Is the expectation here that once you apply available.filter the elements in the available array will be mutated? — jsN00b
– jsN00b, Commented Feb 24, 2022 at 13:03
Try to collect the filtered array separately. And then, update using setAllArtists. — jsN00b
– jsN00b, Commented Feb 24, 2022 at 13:05
Something like so: setAllArtists(prev => (prev.map(({available, ...rest}) => ({rest, available: available.filter(d => ((new Date(d) >= (new Date()))))}))));. — jsN00b
– jsN00b, Commented Feb 24, 2022 at 13:07

jahilldev · Accepted Answer · 2022-02-24 13:06:15Z

3

You're not assigning your filtered results to anything.

Your loop could be changed to something like this:

const result = allArtists.map(({ available }) => available.filter((date) => new Date(date) >= new Date()));

answered Feb 24, 2022 at 13:06

jahilldev

3,8807 gold badges39 silver badges53 bronze badges

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

Comments

JulSeb42 · Accepted Answer · 2022-02-24 19:40:12Z

0

Thanks for your answers, I could use it like this and it's working:

setAllArtists(
    res.data
        .map(({ available, ...artist }) => {
            return {
                available: available.filter(
                    date => new Date(date) >= new Date()
                ),
                artist,
            }
        })
)

answered Feb 24, 2022 at 19:40

JulSeb42

3073 silver badges15 bronze badges

Collectives™ on Stack Overflow

Filtering an array inside an object inside an array in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related