Reputation: 1
i am working on react search but getting error TypeError: Cannot read property 'filter' of undefined. i am using react with custom API. i am using input field for autocomplete after type. i am also using react material-ui framework.
Below Code getting error TypeError: Cannot read property 'filter' of undefined.
import React, { Component } from 'react'
import ApiService from "../../service/ApiService";
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Typography from '@material-ui/core/Typography';
type AppProps = {}
type AppState = {}
class AddUserComponent extends Component<any,any>{
constructor(props: any){
super(props);
this.state ={
searchArray:[],
}
this.saveUser = this.saveUser.bind(this);
this.searchScripData = this.searchScripData.bind(this);
}
componentDidMount() {
this.searchScripData(this.requesDATA2());
}
requesDATA2()
{
let data1= { "symbolOrName":"TATA"};
return data1;
}
saveUser = (e: any) => {
e.preventDefault();
let user = {username: this.state.username, password: this.state.password, firstName: this.state.firstName, lastName: this.state.lastName, age: this.state.age, salary: this.state.salary};
ApiService.addUser(user)
.then(res => {
this.setState({message : 'User added successfully.'});
this.props.history.push('/users');
});
}
searchScripData(searchScrip: any) {
ApiService.searchScripDataList(searchScrip)
.then((res) => {
this.setState({searchArray: res.data.data} )
});
}
//onChange = (e: any) =>
// this.setState({ [e.target.name]: e.target.value });
//search scrip data
onChange = (searchScrip: any) => {
console.log('onChanges');
const { options } = this.props;
const userInput = searchScrip.currentTarget.value;
const searchArray = options.filter(
(optionName: string) =>
optionName.toLowerCase().indexOf(userInput.toLowerCase()) > -1
);
this.setState({
activeOption: 0,
searchArray,
showOptions: true,
userInput: searchScrip.currentTarget.value
});
};
onClick = (searchScrip: any) => {
this.setState({
activeOption: 0,
searchArray: [],
showOptions: false,
userInput: searchScrip.currentTarget.innerText
});
};
onKeyDown = (searchScrip: any) => {
const { activeOption, searchArray } = this.state;
if (searchScrip.keyCode === 13) {
this.setState({
activeOption: 0,
showOptions: false,
userInput: searchArray[activeOption]
});
} else if (searchScrip.keyCode === 38) {
if (activeOption === 0) {
return;
}
this.setState({ activeOption: activeOption - 1 });
} else if (searchScrip.keyCode === 40) {
if (activeOption === searchArray.length - 1) {
console.log(activeOption);
return;
}
this.setState({ activeOption: activeOption + 1 });
}
};
//search scrip data
render() {
//search scrip data
const {
onChange,
onClick,
onKeyDown,
state: { activeOption, searchArray, showOptions, userInput }
} = this;
let optionList;
if (showOptions && userInput) {
if (searchArray.length) {
optionList = (
<ul className="options">
{searchArray.map((optionName: any, index: any) => {
let className;
if (index === activeOption) {
className = 'option-active';
}
return (
<li className={className} key={optionName} onClick={onClick}>
{optionName}
</li>
);
})}
</ul>
);
} else {
optionList = (
<div className="no-options">
<em>No Option!</em>
</div>
);
}
}
//search scrip data
return(
<div>
{this.state.searchArray.map((row: any, key: any) => (
<TableRow>
<TableCell align="left">{row.symbol} asdasdsa</TableCell>
<TextField id="filled-search" label="Search field" type="search" variant="filled" />
</TableRow>
))}
<div className="search">
<input
type="text"
className="search-box"
onChange={onChange}
onKeyDown={onKeyDown}
value={userInput}
/>
<input type="submit" value="" className="search-btn" />
{optionList}
</div>
<Typography variant="h4" style={style}>Add User</Typography>
</div>
);
}
}
const formContainer = {
display: 'flex',
flexFlow: 'row wrap'
};
const style ={
display: 'flex',
justifyContent: 'center'
}
export default AddUserComponent;
Upvotes: 0
Views: 4442
Reputation: 451
Ensure props are passed correctly from parent component. And for null safety keep using options?.filter instead of options.filter
Upvotes: 2