When I do an onclick in the map function, it applies to all of them-CodePudding

When I onclick in the map function, I want to know which one I clicked and only make changes to it. No matter what I did, I couldn't do it. Can you help me ?

const Product = ({categories}) => {
    const [active,setActive] = useState(true)

        function activeCategory(event) {
                setActive(!active)    
        }
    
        return (
            <div className="flex flex-col">
                <div className="pt-8 mx-4">
                    <h5 className="mx-4 text-2xl font-semibold">Kategoriler</h5>
                    <ul className="flex">
                        {categories && categories.map((category)=>(
                            <li onClick={(e)=>activeCategory(e)} className={active ? "p-2 bg-white shadow-lg m-2 transition duration-300 cursor-pointer" : "p-2 bg-yellow-200 shadow-lg m-2 transition duration-300 cursor-pointer"} key={category.id}>{category.title}</li>
                        ))}
                    </ul> 
                </div>
    )

export default Product;

CodePudding user response：

Perhaps, You could use the category.id to identify which element is active.

const Product = ({categories}) => {
    const [activeId, setActiveId] = useState()

    function activeCategory(id) {
      setActiveId(id)    
    }
    
    function isActive(id) {
      return id === activeId;
    }
    
    return (
        ...
          {categories && categories.map((category)=> (
              <li
                onClick={() => activeCategory(category.id)}
                className={isActive(category.id) ? "..." : ""}
                key={category.id}>{category.title}
              </li>
          ))}
        ...
    )
}

export default Product;

CodePudding user response：

you can try this code :

const Product = ({categories}) => {
    const [active,setActive] = useState(0) // if you dont like one of them active , you can change value to null
   
        return (
            <div className="flex flex-col">
                <div className="pt-8 mx-4">
                    <h5 className="mx-4 text-2xl font-mibold">Kategoriler</h5>
                    <ul className="flex">
                        {categories && categories.map((category , index)=>(
                            <li onClick={()=> setActive(index)} className={active == index ? "p-2 bg-white shadow-lg m-2 transition duration-300 cursor-pointer" : "p-2 bg-yellow-200 shadow-lg m-2 transition duration-300 cursor-pointer"} key={category.id}>{category.title}</li>
                        ))}
                    </ul> 
                </div>
    )

export default Product;

CodePudding user response：

You should pass the parameter as an index of map (or any unique id field if available) to activeCategory like this

const Product = ({categories}) => {
    const [activeId, setActiveId] = useState()

    function activeCategory(id) {
      setActiveId(id)    
    }
    
    function isActive(id) {
      return id === activeId;
    }
    
    return (
        ...
          {categories && categories.map((category,index)=> (
              <li
                onClick={() => activeCategory(index)}
                className={isActive(index) ? "..." : ""}
                key={index}>{category.title}
              </li>
          ))}
        ...
    )
}

export default Product;