Reactjs code error --Cannot read property 'renderCat' of undefined

Question

my code is:

import 'babel-polyfill';

import React from 'react';

import ReactDOM from "react-dom";


 class SearchTree extends React.Component{

  constructor(props){

      super(props);
      this.state = {searchString: ''};
   }


   handleChange(e){

    this.setState({
            searchString: e.target.value.trim().toLowerCase(),
             visible: !this.state.visible
        });
    }
   isMatch(e,searchString){

        return e.Name.toLowerCase().match(searchString)
    }
   nestingSerch(e,searchString){

        //recursive searching nesting
        return this.isMatch(e,searchString) || (e.subcats.length && e.subcats.some(e=>this.nestingSerch(e,searchString)));
    }

    nestingSerch(e,searchString){
        //recursive searching nesting
        return this.isMatch(e,searchString) || (e.subcats.length && e.subcats.some(e=>this.nestingSerch(e,searchString)));
    }
    renderCat(cat){
        //recursive rendering
        return (
            <li key={cat.Id}> {cat.Name}
                {(cat.subcats && cat.subcats.length) ? <ul>{cat.subcats.map(this.renderCat)}</ul>:""}
            </li>);
    }

    render() {

        let {items} = this.props;
        let {searchString} = this.state;

        if (searchString.length) {
            items = items.filter(e=>this.nestingSerch(e,searchString))
            console.log(items);
        };

        //nesting, adding to cattegories their subcatigories
        items.forEach(e=>e.subcats=items.filter(el=>el.ParentId==e.Id));
        //filter root categories
        items=items.filter(e=>e.ParentId==0);

        //filter root categories
        return (
            <div>
                <input onChange={this.handleChange} placeholder="Type here" type="text" style={{"width" : "50%",borderColor: "#38c",height:"20"}}  value={this.state.searchString}/>
                <ul>{items.map(this.renderCat)}</ul>
            </div>
        );
    }
}

 export default SearchTree;

here i am getting -Cannot read property 'renderCat' of undefined error.Please help me

Possible duplicate of [TypeError: Cannot read property of undefined when binding onClick](https://stackoverflow.com/questions/43568344/typeerror-cannot-read-property-function-name-of-undefined-when-binding-onclic) — Mayank Shukla, Jul 12 '17 at 07:33

score 0 · Answer 1 · answered Jul 12 '17 at 07:36

0

the "map" function should get a function, with (item,index) or just (item) as parameter. For example: items.map((curr)=>{return {curr.name}}) it doesn't matter for this example that it's recursive, because it returns evetually nest li->ul element which all under one big li element.

answered Jul 12 '17 at 07:36

Ben Cohen

1,380
1
9
12

i did not understand.can u please tell me what is the wrong in my code. – Raju Jul 12 '17 at 07:45
Sure. The javascript array.map function gets a function as parameter. You can see full explanation here: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map The "map" function iterates the array in order to perform a block of code on each item. In React case it will render each item as you wish. Map get a function as parameter, so it should look like this: cats.map( (currentItemInArray) => { return this.renderCat(currentItem) } Because it iterates your cat(?!) array and perform the renderCat on -each- item. – Ben Cohen Jul 13 '17 at 06:32

Kasia · Answer 2 · 2017-07-12T07:58:53.747

0

this should help

const { renderCat } = this;

and in return

<ul>{items.map((item) => { return renderCat(item) })}</ul>

edited Jul 12 '17 at 07:58

answered Jul 12 '17 at 07:53

Kasia

1,665
1
10
16

Reactjs code error --Cannot read property 'renderCat' of undefined

2 Answers2