how can i change dom element with component

Question

import {
  NotificationIcon,
  SummaryIcon,
  PublishIcon,
  EngageIcon,
  ListenIcon,
  ReportIcon,
  PlusIcon,
  MinusIcon,
} from "../../icons/Icons";
import "./Sidebar.scss";
import ReactDOM from "react-dom";



const Sidebar = () => {
  

  // handle accordion menu's open effect
  const handleClassName = (arg) => {
    const element = document.getElementById(arg);
    element.classList.toggle("show");
    element.firstElementChild.lastElementChild.remove()

  };

  const handleBrandsIcon = (arg) => {
    const allBrands = document.querySelectorAll(".sidebar__brand");
    for (let i = 0; i < allBrands.length; i++) {
      allBrands[i].classList.remove("active");
      document.getElementById(arg).classList.add("active");
    }
  };



  const contentBox = [
    {
      id: 0,
      icon: <SummaryIcon className="sidebar__icon" />,
      label: "SUMMARY",
      iconType: "summary",
    },
    {
      id: 1,
      icon: <PublishIcon className="sidebar__icon" />,
      label: "PUBLISH",
      iconType: "publish",
    },
    {
      id: 2,
      icon: <EngageIcon className="sidebar__icon" />,
      label: "ENGAGE",
      iconType: "engage",
    },
    {
      id: 3,
      icon: <ListenIcon className="sidebar__icon" />,
      label: "LISTEN",
      iconType: "listen",
    },
    {
      id: 4,
      icon: <ReportIcon className="sidebar__icon" />,
      label: "REPORT",
      iconType: "report",
    },
  ];

  const brands = [
    {
      img: "./gucci.gif",
      id: 10,
    },
    {
      img: "./coca-cola.gif",
      id: 11,
    },
    {
      img: "./pepsi.gif",
      id: 12,
    },
    {
      img: "./samsung.png",
      id: 13,
    },
    {
      img: "./tesla.gif",
      id: 14,
    },
    {
      img: "./twitter.png",
      id: 15,
    },
  ];

  return (
    <div className="sidebar">
      <h2 className="sidebar__header">
        sociality<label>.io</label>
      </h2>
      <div className="sidebar__wrapper">
        <div className="sidebar__brands">
          {brands.map((brand) => {
            return (
              <div
                id={brand.id}
                className="sidebar__brand"
                onClick={() => handleBrandsIcon(brand.id)}
              >
                <img src={brand.img} className="sidebar__img" alt="/" />
              </div>
            );
          })}
        </div>
        <div className="sidebar__accordion">
          <div className="sidebar__content-box">
            <div className="sidebar__row">
              <NotificationIcon />
              <label className="sidebar__label">NOTIFICATIONS</label>
              <label className="sidebar__label sidebar__label--rounded">
                28
              </label>
            </div>
            <ul className="sidebar__list">
              <li className="sidebar__item">Compase</li>
              <li className="sidebar__item">Feed</li>
            </ul>
          </div>

          {contentBox.map((content) => {
            return (
              <div
                id={content.id}
                className="sidebar__content-box"
                onClick={() => handleClassName(content.id)}
              >
                <div className="sidebar__row">
                  {content.icon}
                  <label className="sidebar__label">{content.label}</label>
                  <PlusIcon className="sidebar__plus" />
                </div>
                <ul className="sidebar__list">
                  <li className="sidebar__item">Compase</li>
                  <li className="sidebar__item">Feed</li>
                </ul>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default Sidebar;

Hi guys have a good day.When i click to div element which has .sidebar__row class name i want to change <PlusIcon/> with <MinusIcon/>.I progressed it to the phase of remove <PlusIcon/> component but i couldnt any way to add <MinusIcon/> component instead of <PlusIcon/>.In addition i tried add ReactDOM.render(<MinusIcon className="sidebar__plus" /> , element.firstChild) end of handleClassName function and i could add instead of but this time all children elements of <div className="sidebar__row"> have been deleted.Finally if u see any absurd things in my code can u give me advice to write more clean code.

Answer 1

Add state to hold the current selected brand id and conditionally add the "active" class if the currently mapped brand id matches the state.

Add state to hold a map of toggled content ids, and conditionally render the unordered list and plus/minus icon on the current content's id match.

The contentBox and brands arrays are static so they can be pulled out of the component, defined outside it.

const contentBox = [.....];

const brands = [.....];

const Sidebar = () => {
  const [showBrandId, setShowBrandId] = React.useState(null);
  const [showContentIds, setShowContentIds] = React.useState({});

  // handle accordion menu's open effect
  const handleClassName = (contentId) => {
    setShowContentIds(ids => ({
      ...ids,
      [contentId]: !ids[contentId], // toggles boolean
    }));
  };

  const handleBrandsIcon = (brandId) => {
    setShowBrandId(brandId); // replaces current active brand
  };

  return (
    <div className="sidebar">
      <h2 className="sidebar__header">
        sociality<label>.io</label>
      </h2>
      <div className="sidebar__wrapper">
        <div className="sidebar__brands">
          {brands.map((brand) => {
            return (
              <div
                id={brand.id}
                className={"sidebar__brand " + brand.id === showBrandId ? "active" : ""}
                onClick={() => handleBrandsIcon(brand.id)}
              >
                <img src={brand.img} className="sidebar__img" alt="/" />
              </div>
            );
          })}
        </div>
        <div className="sidebar__accordion">
          <div className="sidebar__content-box">
            <div className="sidebar__row">
              <NotificationIcon />
              <label className="sidebar__label">NOTIFICATIONS</label>
              <label className="sidebar__label sidebar__label--rounded">
                28
              </label>
            </div>
            <ul className="sidebar__list">
              <li className="sidebar__item">Compase</li>
              <li className="sidebar__item">Feed</li>
            </ul>
          </div>

          {contentBox.map((content) => {
            const showContent = showContentIds[content.id];
            return (
              <div
                id={content.id}
                className={"sidebar__content-box" + showContent ? "show" : ""}
                onClick={() => handleClassName(content.id)}
              >
                <div className="sidebar__row">
                  {content.icon}
                  <label className="sidebar__label">{content.label}</label>
                  {showContent ? (
                    <MinusIcon className="sidebar__minus" />
                  ) : (
                    <PlusIcon className="sidebar__plus" />
                  )}
                </div>
                {showContent && (
                  <ul className="sidebar__list">
                    <li className="sidebar__item">Compase</li>
                    <li className="sidebar__item">Feed</li>
                  </ul>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};