govind60
govind60

Reputation: 1

Working on react search but getting error TypeError: Cannot read property 'filter' of undefined

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

Answers (1)

AFLAH ALI
AFLAH ALI

Reputation: 451

Ensure props are passed correctly from parent component. And for null safety keep using options?.filter instead of options.filter

Upvotes: 2

Related Questions