State is not displayed after setting it in ReactJS - reactjs

Question

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 poping 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. If anybody can see where is issue could please respond could help me here out would be great ! Thanks.
Full code for component as requested in comment:
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;
UPDATED:
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 array, how i pass it and IMG of console.log(this.props.catList) :
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}/>)
}
})