Adding activeClassName to navLink after router V4 map is invalid

invalid addition of activeClassName to navLink after router V4 map

adding activeClassName without circular rendering of navLink is valid, but adding activeClassName through map looping navLink is invalid and does not prompt any error

  <div className="left_Menuitems">{
            this.state.menuData.map((item,key) =><div key={key}> {
              (item.name === ""||item.name === ""||item.name === "")
                ? <div><div className="menu_title">{item.name}</div>{
                      item.subList.map((item,key) =><div key={key} className="subMenu_title"> <NavLink key={key}  to={item.router} activeClassName="activeted">{item.name}</NavLink>
                    </div>)
                    }</div>
                : ""
            }</div>)
          }</div>

expect navLink through map loop to add activeClassName effectively

Mar.26,2021

I think there is something wrong with your code

        <div className="left_Menuitems">
          {this.state.menuData.map((item, key) => (
            <div key={key}>
              {item.name === "" || item.name === "" || item.name === "" ? (
                <div>
                  <div className="menu_title">{item.name}</div>
                  {item.subList.map((item, key) => (
                    <div key={key} className="subMenu_title">
                      <NavLink key={key} to={item.router} activeClassName="activeted">
                        {item.name}
                      </NavLink>
                    </div>
                  ))}
                </div>
              ) : (
                ""
              )}
            </div>
          ))}
        </div>
Menu