Data filtering in React using Lodash

I am currently making a Table component in React.js. My goal is to implement a search function similar to that one being used at

Below is my code using filter and includes functions from Lodash library. This code does not work because it only looks for exact matches. For example if an object in my data array has fruit: "apple", the filter "app" has no matches.

  data = filter(data, (row) => {
    return includes(row, this.state.filter);

Is there any way I can implement fuzzy search with any of lodash's built in functions? If not can you suggest another way?


lodash will not have what you need. Depending on your search requirements you could utilize a distance metric based search such as Levenshtein. Or maybe a substring length metric. For a library drop in, look at fuzzy

So, they are searching where characters in first and last name match what you are typing.

In lodash, you can use a filter like this..

.filter(contact => !(this.state.filter && contact.lastName.toLowerCase().indexOf(this.state.filter) == -1 && contact.firstName.toLowerCase().indexOf(this.state.filter) == -1))

This is assuming you are setting the search value to the state and that you are wanting to match the firstname / lastname fields. You should be able to modify this to meet your needs.

Need Your Help

Learning Silverlight as a non .NET developer


There are several people about (myself being one of them) who have been developing RIA for a while now using Flex and AJAX. However Silverlight is now on the scene and worth picking up.

how to bind two multibinders with @Named but same interface type?


We have a Multibinder and would like to have two so we need the @Named annotation so we can do