CODEWITHSUNDEEP
reactjsundefinedlowercase
user11409890
user11409890

Reputation:

Cannot read property 'toLowerCase' of undefined React

im new to stackoverflow and react,i have some problems. Here is code. 

onSearchChange = (event) => {
  this.setState({ searchfiled: event.target.value })
}

render() {
  const filteredRobots = this.state.robots.filter(robots => {
    return robots.name.toLowerCase().includes(this.state.searchfiled.toLowerCase());
  })
  return(
    <div className='tc'>
      <h1>Robofriends</h1>
      <SearchBox searchChange={this.onSearchChange}/>
      <CardList robots={filteredRobots}/>
    </div>
  );
}

I get this error TypeError: Cannot read property 'toLowerCase' of undefined. Can anyone help me?

Upvotes: 0

Views: 1654

Answers (1)

Carlos Saiz Orteu
Carlos Saiz Orteu

Reputation: 1805

I got it, you got a typing error in the filter. You got this:

const filteredRobots = this.state.robots.filter(robots =>{
return robots.name.toLowerCase().includes(this.state.searchfiled.toLowerCase());
})

It should be this:

const filteredRobots = this.state.robots.filter(robot =>{
return robot.name.toLowerCase().includes(this.state.searchfield.toLowerCase());
})

You where mistaking searchField using searchFiled.

Moreover in the filter function you are using robots which is the same name as the imported "robots" which can lead to mistakes. Use robot insteadd.

Upvotes: 2

Related Questions