Not Closing the sub Child on click parent

[vijayamadhavi3187]

Hi,

I am new to react native and iam facing an issue at collapsible accordion.. when i click parent element "Computer & Tablets" inside that child element is showing perfectly..

when i click child element the sub child is showing perfectly, but without closing their parent and again when i click another parent the child is already opened can u pls rectify the issue ASAP..

This is my array..

const data = { "data":[ { "category_id":"169", "name":"Computer & Tablets", "children":[ { "category_id":"698", "children":[ { "category_id":"1", "name": "IPhones" }, { "category_id":"2", "name": "Smart Phones" }, { "category_id":"3", "name": "Basic Phones" } ], "name":"Computer & Laptop Accessories", }, { "category_id":"786", "name":"Computer Peripherals", "children":[ { "category_id":"1", "name": "Charger" }, { "category_id":"2", "name": "Charger Connector" }, { "category_id":"3", "name": "Datacable" } ], }, { "category_id":"680", "name":"Computers", "children":[ { "category_id":"1", "name": "Laptop" }, { "category_id":"2", "name": "Computer Pheriperals" } ], } ], "thumb":"Computers.png" }, { "category_id":"1027", "name":"Mobiles & Accessories", "children":[ { "category_id":"153", "name":"Mobiles", "image":" mobile1.png" }, { "category_id":"178", "name":"Mobile Accessories", "image":" audio.png" } ], "thumb":" Mobiles.png" }, { "category_id":"740", "name":"Personal & Health Care", "children":[ { "category_id":"631", "name":"Health Care", "image":" shopbycategory/healthcare.png" }, { "category_id":"727", "name":"Personal Care", "image":" shopbycategory/personalcare.png" } ], "thumb":" Health Care.png" } ] } setTotalData(data.data);

const [activeSections, setActiveSections] = useState([]); const [activeSubSections, setActiveSubSections] = useState([]); const setSections = (sections) => { setActiveSections(sections); }; const setSubSections = (sections) => { setActiveSubSections(sections); };

const renderHeader = (section, _, isActive) => { return (

{(section)?(<> {section.name}

        <View style={{marginTop:28,marginRight:10}}>
          {(isActive)?(<><Icon name="chevron-circle-down" size={18} color="#6f6f6f" /></>):(<><Icon name="chevron-circle-right"size={18} color="#6f6f6f" /></>)}
        </View>
        </View>
    </>):null}
  </View>

);

}; const renderSubHeader = (item, _, isActive) => { return (

{item.name}

        <View >
        {(isActive)?(<><Icon name="caret-down" size={18} color="#6f6f6f" /></>):(<><Icon name="caret-right"size={18} color="#6f6f6f" /></>)}
        </View>
      </View>
  </View>

);

};

const renderSubContent = (section, _,) => { return(

( gotoCategoryPage(item)}> {item.name}

          </TouchableOpacity>

        )}  keyExtractor={(item, index) => index.toString()} /> 

    </View>

)

} const renderContent = (section, _, isActive) => { return (

);

}; return (

{(totalData)?(<> ):null}

) }