Filter Search in React JS - reactjs

Question

Im having trouble filtering data based on my input search... my goal is to search for 'M' and to see a list of all payload data containing 'M' and as I get closer to the exact string 'Matt' only show the payload data for 'Matt' and bacisally be able to search by first_name, last_name or number. Thank you in advance, ANY feedback is appreciated! Ive been stuck on this >_<
Im using a Custom component library and trying to do a basic search & filter, the issue is not with the custom library but with the filter function. It doesnt seem to retrieve the v.first_name value. Im also open to any other sorts of filter libraries / approaches.
I typed in the letter 'M' into the searchbox UI component and got the following outputs for each console log statement
import React, { Component } from 'react';
import { IS_FETCHING_DBUSERS, FETCH_DBUSERS_SUCCESS } from '../../actions/keys';
import { users } from '../../actions/URI';
import { fetchComponent } from '../../actions/index';
import { connect } from 'react-redux';
import _ from 'lodash';
import {
LumosTheme,
Grid, Form, Icon, Container, Loader
} from '#CustomLibrary/core';
class SearchBar extends Component {
state = {
responseData: " ",
handle: true,
query: "",
filterValues: []
};
searchString = this.state.query;
responseData = this.props.Users.data;
componentDidMount() {
this.props.fetchComponent([IS_FETCHING_DBUSERS, FETCH_DBUSERS_SUCCESS], users).then(() => {
return this.setState({
handle: false
})
})
}
handleInputChange = (value) => {
console.log("In HandleInputFunction, Value= ", value) // Output of value is 'M'
this.setState({query:value}, () => {
console.log("In HandleInputFunction, query= ", this.state.query) // Output of query is 'M'
this.filterArray();
}
)
}
filterArray = () => {
console.log('In Filter fxn')
let searchString = this.state.query;
let responseData = this.props.Users.data;
console.log('This is the responseData in Filter: ', responseData); // output of responseData is '(6)[{...},{...},{...},{...},{...},{...}]'
console.log('This is my filterValues in Filter: ', this.state.filterValues); //output of filterValues is '[]'
console.log('This is my searchString in Filter: ', searchString) //output of searchString is 'M'
if(searchString.length > 0){
const filterData = _.filter(this.state.responseData, (v) => v.first_name === searchString);
console.log('This is my filterData in loop: ',filterData) //output of filterData is '[]'
this.setState({
filterValues : filterData
})
console.log('This is my filterValues in loop: ', this.state.filterValues) //output of filterValues is '[]'
}
}
// for now this drop down 'searchByOptions' is hard coded and just here for UI visual purposes, what I want to do later is depending on the option the user choses I pass the correct payload.
searchByOptions = [
{ label: 'Name or number', value: 'NAME/number' },
{ label: 'Distribution List', value: 'DL' },
{ label: 'Database Schema or Table', value: 'DB' },
{ label: 'Role', value: 'Role' }
];
render() {
if (this.state.handle) {
return <Loader />
}
else {
return (
<LumosTheme>
<Container width='1379px'>
</Container>
<Container width='1379px'>
<Grid paddingTop='10px'>
<Form.Item width='380px'>
<Form.Dropdown
options={this.searchByOptions}
defaultOption={this.searchByOptions[0]}
/>
</Form.Item>
</Grid>
<Grid flexWrap="wrap" width='1000px'>
< Form.SearchBox placeholder='Search' icon={<Icon.SearchRounded />}
userSelectOnClick
openOnClick
onSearch={this.handleInputChange}
value={this.state.query}
>
<Form.SearchList >
{this.state.responseData ?
this.state.filterValues.map(item => (
<Form.SearchOption
value={item.first_name}
/>
)):'null'}
</Form.SearchList>
</ Form.SearchBox>
</Grid>
</Container>
</LumosTheme>
)
}
}
}
const mapStateToProps = state => {
return {
Users: state.users
}
}
export default connect(mapStateToProps, { fetchComponent })(SearchBar);
my payload is being fetched correctly and looks like so
0: {id:1, first_name: "Matt", last_name: "Jones", number:"123",}
1: {id:2, first_name: "Alex", last_name: "Lee", number:"675",}
2: {id:3, first_name: "Adam", last_name: "Khan", number:"733",}
3: {id:4, first_name: "Sue", last_name: "Kid", number:"248",}
4: {id:5, first_name: "Jade", last_name: "Smith", number:"907",}
5: {id:6, first_name: "Luca", last_name: "James", number:"125",}

Answer 1

It looks like you are doing an exact match with that filter condition.
You can use _.filter(this.state.responseData, (v) => v.first_name.includes(searchString));.
Pro tip: once you go lodash, you never go back... That didn't rhyme, but you get the point.