props.dogs.map is not a function

Question

I have a search bar and a card that displays a dog name. I want to use the search bar to filter the dog's name. Right now I am getting the error props.dogs.map is not a function.

In the DogCard component, I have changed props.dogs to props.filteredName but I am still getting the error. I also looked at ReactJS with ES6: this.props is not a function when I communicate two components, because it was similar to my error. I have tried handleFilterName={this.handleFilterName.bind(this)} and handleFilterName={e => this.handleFilterName(e)} but I am still getting the same error.

class SelectDogs extends Component {
 state = {
     dogs: 
        [ {
             name: 'Jack',
             breed: 'beagle',
             age:'2',
         }
     ],
     filteredName: ''
 }



 handleFilterName = (e) => {

     const dogs = this.state.dogs
     const filteredDogName = dogs.filter( dog => {
     return (
         dog.name.search(e.currentTarget.value) !== -1
       );

     })
     this.setState({filteredName: filteredDogName})  
 }


 render() {
     return (
         <div>
             <NavHeader/>
             <SearchDog handleFilterName={this.handleFilterName}/>
             <DogCard  dogs={this.state.filteredName}></DogCard>
         </div>
     )
 }
}
export default SelectDogs 



const SearchDog = (props) => {

 return (

   <div className="search-container">
      <Form  inline onChange={props.handleFilterName}>
         <FormControl type="text" placeholder="Search a Dog" className=" mr-sm-2" />
         <Button type="submit"><FaSistrix/></Button>
      </Form>
   </div>


 )


}

export default SearchDog

const DogCard = (props) => {


return props.dogs.map( dog => 
     {
         return <div className="dog-container"><Card className="dog-card" key={dog.name}><Link to='/dog'>{dog.name}</Link></Card></div>

     })



}

export default DogCard

First of all, replace "strain" with "dog" in your .map method. Second of all, console.log props in DogCard: console.log(props.dogs) and look what will you get. — Sergey, Jul 07 '19 at 13:53
what result you get when you console this.state.filteredName the error is around this — Muath, Jul 07 '19 at 13:59

score 2 · Accepted Answer · edited Jul 07 '19 at 16:02

As I see it, in your initial state definition filteredName is a String, and you call an Array method map on it.

Change the beginning to

class SelectDogs extends Component {
 state = {
     dogs: 
        [ {
             name: 'Jack',
             breed: 'beagle',
             age:'2',
         }
     ],
     filteredName: []
 }
...

and everything should be ok.

I assume the problem is in bad property name, if you rename it to filteredDogs the problem would be visible on the first sight.

props.dogs.map is not a function

1 Answers1