I am trying to filter my field while tying in input field as in autocomplete .I do like this but it not filter my list
here is my code
onChangeHandler(e){
console.log(e.target.value);
var newArray = this.state.users.map((d)=>{
return d.indexOf(e.target.value) !== -1
});
console.log(newArray)
this.setState({
users:newArray
})
}
You can do something like this:
class First extends React.Component {
constructor(){
super();
this.state ={
users: ['abc',"pdsa","eccs","koi"],
input: '',
}
}
onChangeHandler(e){
this.setState({
input: e.target.value,
})
}
render (){
const list = this.state.users
.filter(d => this.state.input === '' || d.includes(this.state.input))
.map((d, index) => <li key={index}>{d}</li>);
return (<div>
<input value={this.state.input} type="text" onChange={this.onChangeHandler.bind(this)}/>
<ul>{list}</ul>
</div>)
}
}
ReactDOM.render(<First/>,document.getElementById('root'));
This is essentially expanding on what you had, and what you had was close. You could also choose to apply the filter within the changeHandler if you want, but I prefer to do it "later" if possible, in case you want to later add other filters or whatnot.
Your code is also fine, you just need to change .map to .filter method in your code and everything will work. Map method does not filter it just returns a new value for each element, which you were passing a boolean. Whereas you actually wanted to filter the list.
onChangeHandler(e){
console.log(e.target.value);
var newArray = this.state.users.filter((d)=>{
return d.indexOf(e.target.value) !== -1
});
console.log(newArray)
this.setState({
users:newArray
})
}