Snap.svg | The JavaScript library for modern SVG graphics | Animation library

So Basically filter always returns an array. You need to return first selected object from that array (which eventually is only one object at index 0). So do as follows:

Change it to the following and it all should work...

The main thing is using Snap("bee") rather than $("bee") and including an "easing" function in the animate parameters.

Docs for animate can be found here

Use this CDN

You forgot to return the actual result for the filter function

Assuming it's the map you've said it is, the problem is that you have at least one object that doesn't have a languages property — e.g., the data you're receiving sometimes leaves it off. The two objects in your sample JSON have it, but apparently, not all do.

How you handle it is up to you.

1. You could default it when destructuring by adding = [] after languages in the destructuring in the parameter list.

In your case, you can simply do:

If you are using create-react-app you will want to put static assets such as images (if you are not not ES6 importing images into the code) in the public folder. Try moving these images into the public folder created by create-react-app. You may also need to update the paths. Assuming your structure is:

You can use the Array method filter() to limit the array of peoples.

To filter by one parameter you could use includes() but you are using array of filters so .every() is a better option (it behaves like AND), you could also use .some() to find person with at least one language.