score:1

Accepted answer
import * as React from "react";
import "./styles.css";

const data = [
  { name: "Alle", text: 2 },
  { name: "Eiendom", text: 2 },
  { name: "Familie", text: 2 },
  { name: "Kontrakt", text: 2 },
  { name: "Husarbeid", text: 2 }
];

const Filter = props => {
  const [activIndex, setActiveIndex] = React.useState(null);
  const handleClick = index => {
    console.log(index);
    setActiveIndex(index);
  };
  return (
    <div className="filter">
      {data.map((item, index) => (
        <div
          key={index}
          className={
            activIndex === index ? "filter__item active" : "filter__item"
          }
          onClick={() => handleClick(index)}
        >
          <p>{item.name}</p> <span>{item.text}</span>
        </div>
      ))}
    </div>
  );
};

export default Filter;

score:0

import styles from './filter.scss';

<div className={`${styles.active} filter__alle active`}>
                <p>Alle</p> <span>2</span>
</div>

score:0

const Filter = (props) => {
    const list = ["Alle", "Eiendom", "Familie", "Kontrakt", "Husarbeid"]
    const handleClick = e => {
         e.target.classList.toggle("active");
    }

    return (
        <div className="filter">
        {list.map(name => (
            <div className="filter__alle" key={name} onClick={handleClick}>
                <p>{name}</p> <span>2</span>
            </div>
            ))}
        </div>
    );
}


Related Query

More Query from same tag