Breaking News: Grepper is joining You.com. Read the official announcement!

Set active state one at a time

chifarol answered on July 27, 2022 Popularity 1/10 Helpfulness 1/10

answer Set active state one at a time

Set active state one at a time

Comment

import React, { useState } from "react";
import "./sidebar-card.scss";

function SidebarCard({ sidebarItems }) {
  const [active, setActive] = useState("");
  const sidebarItemHtml = [];
  for (const x in sidebarItems) {
    sidebarItemHtml.push(
      <div
        id={x}
        className={`sidebar-item ${active === x ? "sidebar-item-active" : ""}`}
        key={x}
        onClick={(event) => setActive(event.target.id)}
      >
        {sidebarItems[x]}
      </div>
    );
  }
  return <div className="sidebar-container gray3 f14">{sidebarItemHtml}</div>;
}

export default SidebarCard;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript set state time

Link to this answer
Share Copy Link

Contributed on Jul 27 2022

chifarol

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

Set active state one at a time

Contents

More Related Answers

Set active state one at a time

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.