I am receiving some data as props and on click I am trying to display next items from array. In render I'm calling `{this.dropdown()}` which triggers folowing and display data succedsfully:

    dropdown = () => {
      var dropdown = undefined
      if(this.props.catList){
        const cat = this.props.catList
        const list = JSON.stringify(this.props.catList)
        if(list.length > 0){
          dropdown = <div><p onClick={() =>{this.subCat()}}>{cat.title}</p>{this.state.firstSubCat}</div>
        }
      }
      return dropdown
    }

Next, when I click on item, sub categories is displayed with no issues and generates place where to display state for next function `{this.state['sub'+cat.id]}` :

    subCat = () => {
      let subCat = []
      this.props.catList.children.map(cat => {
        subCat.push(<div key={cat.id}><p key={cat.id} onClick={() =>{this.searchSubCat(cat.id)}}>{cat.title}</p>{this.state['sub'+cat.id]}</div>)
      })
      this.setState({firstSubCat: subCat})
    }

Next two function is for loop through rest of array to display next items on click. (Please note that I did not use it from beginning because first line of data is not objects but contains 'children' as array so now i can use these two functions):

    find = (array, id) => {
      // Loop the entries at this level
      for (const entry of array) {
          // If we found it, return it
          if (entry.id === id) {
              return entry;
          }
          // If not but there's a type array, recursively search it
          if (Array.isArray(entry.type)) {
              const found = find(entry.type, id);
              if (found) {
                  // Recursive search found it, return it
                  return found;
              }
          }
      }
      return undefined
    }

    searchSubCat = (id) => {
      let subCat = []
      const children = this.find(this.props.catList.children, id)
      children.children.map(cat => {
        subCat.push(<div key={cat.id}><p key={cat.id} onClick={() =>{this.searchSubCat(cat.id)}}>{cat.title}</p>{this.state['sub'+cat.id]}</div>)
      })
      this.setState({['sub' + id]: subCat})
    }

So far there is no errors popping up but in generated place state is not being displayed. When generating place ( with this: `{this.state['sub'+cat.id]}` ) where to display state I pass its id to next step to set state with same id so state should be displayed there but nothing.

**Full code for component:**

    import React, {Component} from 'react';

    class SearchResult extends Component {

      constructor( props ){
        super( props );
        this.state = {

        }
      }

      find = (array, id) => {
        // Loop the entries at this level
        for (const entry of array) {
            // If we found it, return it
            if (entry.id === id) {
                return entry;
            }
            // If not but there's a type array, recursively search it
            if (Array.isArray(entry.type)) {
                const found = find(entry.type, id);
                if (found) {
                    // Recursive search found it, return it
                    return found;
                }
            }
        }
        return undefined
      }

      searchSubCat = (id) => {
        let subCat = []
        const subId = 'sub' + id
        console.log(subId)
        const children = this.find(this.props.catList.children, id)
        children.children.map(cat => {
          subCat.push(<div key={cat.id}><p key={cat.id} onClick={() =>{this.searchSubCat(cat.id)}}>{cat.title}</p>{this.state['sub'+cat.id]}</div>)
        })
        this.setState({['sub' + id]: subCat})
      }

      subCat = () => {
        let subCat = []
        this.props.catList.children.map(cat => {
          subCat.push(<div key={cat.id}><p key={cat.id} onClick={() =>{this.searchSubCat(cat.id)}}>{cat.title}</p>{this.state['sub'+cat.id]}</div>)
          console.log('sub--'+cat.id)
        })
        this.setState({firstSubCat: subCat})
      }
      dropdown = () => {
        var dropdown = undefined
        if(this.props.catList){
          const cat = this.props.catList
          const list = JSON.stringify(this.props.catList)
          if(list.length > 0){
            dropdown = <div><p onClick={() =>{this.subCat()}}>{cat.title}</p>{this.state.firstSubCat}</div>
          }
        }
        return dropdown
      }

      render() {
        return (
          <div>
            {this.dropdown()}
          </div>

        )
      }
    }

    export default SearchResult;

I receive array from server with Redux which I send to my first component where I use map() method to find 1st level of array and send it to component with its childrens as props(catList). Cant really copy and paste catList prop value here so here is full array from server, how i pass it and would add IMG of console logging it but seems that I need at least 10 reputation to do that.

Array:

    [{"id":1,"title":"Electronics","path":"Electronics","children":[{"id":2,"title":"Accessories","children":[{"id":6,"title":"Portable Power Banks","children":[]},{"id":7,"title":"Charging Cables","children":[]},{"id":9,"title":"Batteries","children":[{"id":10,"title":"Disposable","children":[]},{"id":19,"title":"Rechargable","children":[]}]}]},{"id":3,"title":"Computers","children":[{"id":4,"title":"Components","children":[{"id":5,"title":"Laptops","children":[]}]}]}]},{"id":2,"title":"Accessories","path":"Electronics->Accessories","children":[{"id":6,"title":"Portable Power Banks","children":[]},{"id":7,"title":"Charging Cables","children":[]},{"id":9,"title":"Batteries","children":[{"id":10,"title":"Disposable","children":[]},{"id":19,"title":"Rechargable","children":[]}]}]},{"id":6,"title":"Portable Power Banks","path":"Electronics->Accessories->Portable Power Banks","children":null},{"id":7,"title":"Charging Cables","path":"Electronics->Accessories->Charging Cables","children":null},{"id":9,"title":"Batteries","path":"Electronics->Accessories->Batteries","children":[{"id":10,"title":"Disposable","children":[]},{"id":19,"title":"Rechargable","children":[]}]},{"id":10,"title":"Disposable","path":"Electronics->Accessories->Batteries->Disposable","children":null},{"id":19,"title":"Rechargable","path":"Electronics->Accessories->Batteries->Rechargable","children":null},{"id":3,"title":"Computers","path":"Electronics->Accessories->Computers","children":[{"id":4,"title":"Components","children":[{"id":5,"title":"Laptops","children":[]}]}]},{"id":4,"title":"Components","path":"Electronics->Accessories->Computers->Components","children":[{"id":5,"title":"Laptops","children":[]}]},{"id":5,"title":"Laptops","path":"Electronics->Accessories->Computers->Components->Laptops","children":null},{"id":11,"title":"Cars","path":"Cars","children":[{"id":12,"title":"Electronics","children":[{"id":13,"title":"Accessories","children":[{"id":14,"title":"Chargers","children":[]}]}]}]},{"id":12,"title":"Electronics","path":"Cars->Electronics","children":[{"id":13,"title":"Accessories","children":[{"id":14,"title":"Chargers","children":[]}]}]},{"id":13,"title":"Accessories","path":"Cars->Electronics->Accessories","children":[{"id":14,"title":"Chargers","children":[]}]},{"id":14,"title":"Chargers","path":"Cars->Electronics->Accessories->Chargers","children":null},{"id":15,"title":"DIY","path":"DIY","children":[{"id":16,"title":"Power Tools","children":[{"id":17,"title":"Accessories","children":[{"id":18,"title":"Batteries","children":[]}]}]}]},{"id":16,"title":"Power Tools","path":"DIY->Power Tools","children":[{"id":17,"title":"Accessories","children":[{"id":18,"title":"Batteries","children":[]}]}]},{"id":17,"title":"Accessories","path":"DIY->Power Tools->Accessories","children":[{"id":18,"title":"Batteries","children":[]}]},{"id":18,"title":"Batteries","path":"DIY->Power Tools->Accessories->Batteries","children":null}]

and here i use map() method from where prop catList is passed to component: 

    this.props.searchRes.map(cat => {
      if(!cat.path.includes('->')){
        categories.push(<SearchResult filtered={false} title={cat.title} id={cat.id} catList={cat} key={cat.id}/>)
      }
    })

If anybody can see where is issue could please respond could help me here out would be great ! Thanks.