انتخاب شدن همه ی آیتم های منو

لطفا کد رو به اشتراک بزارین.

https://jsfiddl

@parastooebrahimi

@imaniy این کد هست :

import React from 'react';
import { Link, } from 'react-router-dom';
class SidebarView extends React.Component {
    render() {
        let filtered = this.props.menuItem;
        if (this.props.searchInput) {
            filtered = filtered.filter(item => item.name.toLowerCase().includes(this.props.searchInput.toLowerCase()))
        }
        return (
            <React.Fragment>
                <div id="wrapper">
                    < ul id="side-menu" className="sidebar navbar-nav navbar-sidenav collapsed show">
                        <li className="nav-item sidebar-search">
                            <form className="form">
                                <input type="search" className="form-control"
                                    placeholder="Search the menu..."
                                    onChange={this.props.searchFilter} />
                            </form>
                        </li>
                        {filtered.map((item, index) =>  //maping the items
                            <li key={index} className="nav-item" >
                                <a key={index} onClick={() => this.props.handleSidebarClick(index)}
                                    className={this.props.shownSidebar[index] ? "nav-link nav-link-collapse " : "nav-link nav-link-collapse collapsed "} >
                                    <i className={item.icon} ></i>
                                    <span className="nav-link-text" >
                                        {item.name}</span>
                                </a>
                                <ul className={this.props.shownSidebar[index] ? "sidenav-second-level collapse show " : "sidenav-second-level collapse "}>
                                    {
                                        item.children.map((item, index) =>
                                            !Array.isArray(item.children) ?
                                                (<React.Fragment key={index}>
                                                    <li key={index} className="nav-item" >
                                                        {(item.isExternalUrl) ?
                                                            <a href={`${item.url}`} className="nav-link" >
                                                                <i className={item.icon} ></i>
                                                                <span >{item.name}</span>
                                                            </a>
                                                            :
                                                            <Link to={`/${item.url}`} className="nav-link" >
                                                                <i className={item.icon} ></i>
                                                                <span >{item.name}</span>
                                                            </Link>}
                                                    </li>
                                                    {/* <li className="nav-divider"></li> */}
                                                </React.Fragment>)
                                                //{return(console.log(Array.isArray(item.children), item.name, item.children)}
                                                :
                                                <li key={index} className="nav-item" >
                                                    < a onClick={() => this.props.handleSubMenu(index)} to={`/${item.url}`}
                                                        className={this.props.shown[index] ? "nav-link nav-link-collapse" : "nav-link nav-link-collapse collapsed"}>
                                                        <i className={item.icon} ></i>
                                                        <span >{item.name}</span>
                                                    </ a>
                                                    <ul className={this.props.shown[index] ? "sidenav-third-level collapse show  " : "sidenav-third-level collapse"} >
                                                        {item.children.map((child, index) =>
                                                            <li key={index} className="nav-item" >
                                                                <Link to={`/${child.url}`}  className="nav-link" >
                                                                    <i className={child.icon} ></i>
                                                                    <span>{child.name}</span>
                                                                </Link >
                                                            </li>

                                                            // {/* <li className="nav-divider"></li> */}
                                                        )}
                                                    </ul>
                                                </li>
                                        )}
                                </ul>
                            </li>
                        )}
                    </ul>
                </div>
            </React.Fragment>
        )
    }
}
export default SidebarView;

آیتم های منو هم از یک فایل میاد که به این صورت هست :

allMenus = [
        {
            "name": "Reports", "id": "1", "icon": "fa-fw fas fa-file-alt",
            "children": [{ "name": "Financial", "route": "reports/financial", "url": "reports/financial", "icon": "fa-fw fas fa-money-bill-alt" },
                { "name": "Item sales", "route": "reports/itemSales", "url": "reports/itemSales", "icon": "fa-fw fas fa-shopping-cart" },
                { "name": "Zero sales", "route": "reports/zeroSales", "url": "reports/zeroSales", "icon": "fa-fw far fa-sticky-note" },
                { "name": "Held sales", "route": "reports/heldSales", "url": "reports/heldSales", "icon": "fa-fw fas fa-hand-holding-usd" },
}]

@kamran.davar

@kamran.davar
@sinashahoveisi
@hesammousavi
@ali.bayat
ببخشید کسی میتونه برای این مشکل کمک کنه که اشکال از چی هست؟

درود
فکر کنم دوستان React کار بهتر بتونند راهنمایی کنند.