i want move active class at my code in react js

Said Al-Ghiyats 0
Viewed 22

i have code like this

import React, { useState } from 'react';
import "./portfolio.css";
import Menu from './Menu';

const Portfolio = () => {

const [items, setItems] = useState(Menu);
const filterItem = (categoryItem) => {
    const updateItems = Menu.filter((curElem) => {
        return curElem.category === categoryItem;
    });

    setItems(updateItems);
}
return (
    <div className="work__filters container">
        <span className="work__item item-active" onClick={() => setItems(Menu)}>All</span>
        <span className="work__item" onClick={() => filterItem("Web")}>Web</span>
        <span className="work__item" onClick={() => filterItem("App")}>App</span>
        <span className="work__item" onClick={() => filterItem("Design")}>Design</span>
    </div>

i want move the className="item-active" when i click other menu

please help me I'm still a beginner

output =>

output

jsx reactjs css
2 Answers

First, you need a state to monitor which category is currently active.

const [category, setCategory] = useState("All"); // possible values [All, Web, App, Design]

Then, you need to set and unset the item-active class depending on which category is active.

You can do the primitive way

className={`work__item ${category === "All" ? "item-active" : ""}`}

Or using a small utility library clsx

clsx("work__item", { "item-active":  category === "All"})

Putting everything together:

import React, { useMemo, useState } from "react";
import "./portfolio.css";
import Menu from "./Menu";
import clsx from "clsx";

const Portfolio = () => {
  const [category, setCategory] = useState("All");
  // a computed variable "items" which update itself only when "category" is changed
  const items = useMemo(
    // array filter, get items when category matches or when category is selected to "All"
    () => Menu.filter(({ category: c }) => c === category || category === "All"),
    [category] // watch "category" state, update "items" when "category" changes
  );

  return (
    <div className="work__filters container">
      <span
        className={clsx("work__item", { "item-active": category === "All" })}
        onClick={() => setCategory("All")}
      >
        All
      </span>
      <span
        className={clsx("work__item", { "item-active": category === "Web" })}
        onClick={() => setCategory("Web")}
      >
        Web
      </span>
      <span
        className={clsx("work__item", { "item-active": category === "App" })}
        onClick={() => setCategory("App")}
      >
        App
      </span>
      <span
        className={clsx("work__item", { "item-active": category === "Design" })}
        onClick={() => setCategory("Design")}
      >
        Design
      </span>
    </div>
  );
};
Matthew Kwong0

One of the easiest solution for adding active class to the current button (highlight it) for react developers.

const {useState,Fragment} = React;

const App = () => {
  const [active, setActive] = useState("");
 
  const handleClick = (event) => {
    setActive(event.target.id);
    
  }

    return (
      <Fragment>
      <button
        key={1}
        className={active === "1" ? "active" : undefined}
        id={"1"}
        onClick={handleClick}
      >
        Solution
      </button>

       <button
       key={2}
       className={active === "2" ? "active" : undefined}
       id={"2"}
       onClick={handleClick}
     >
      By
     </button>

      <button
      key={3}
      className={active === "3" ? "active" : undefined}
      id={"3"}
      onClick={handleClick}
    >
        Jamal
    </button>
</Fragment>

    );
}
 ReactDOM.render(
  <App/>,
  document.getElementById("react")
);

CSS

.active{
background-color:red;
}
Kishan Dobariya0
Related