Q: changing the classname of a previous and next item in a mapped list in react I'm trying to assign a classname to a previous and next item of a mapped list of elements. The current item is tracked with a useState, and is set based on the click of a previous/next button.
The problem for me is, how do I select the previous and next item based on the active item?
Since I'm mapping over an array, I can't just add a specific data-attribute, marking the previous , current and next item. (I think?)
Anyways, the clickHandlers and stateSetters are working as intended, I just need to figure out how to apply specific previous and next classes based on the active index AND have them updated when the active Index state changes.
This is my current code:
You see in my useEffect hook, I do have the logic to acquire both the previous and next item based on the currentIndex, but I don't know how to select those elements, and assign a specific class to them.
import { useEffect, useRef, useState } from "react"
import ArrowLeft from "../../../../assets/img/ArrowLeft"
import ArrowRight from "../../../../assets/img/ArrowRight"
import projectsData from "../../../../utils/projects.json"

export default function ProjectsNew() {
  // const { currentSection } = useContext(CurrentSectionContext)
  const [projects, setProjects] = useState([])
  const projectsRef = useRef(null)
  let [activeIndex, setActiveIndex] = useState(0)

  useEffect(() => {
>! const prevIndex =
>! activeIndex - 1 >= 0 ? activeIndex - 1 : projects.length - 1
>! 
>! const nextIndex =
>! activeIndex + 1 <= projects.length - 1 ? activeIndex + 1 : 0

    setProjects(projectsData.projects)
  }, [projects, activeIndex])

  const handleNextClick = () => {
    if (activeIndex + 1 <= projects.length - 1) {
      setActiveIndex(activeIndex + 1)
    } else {
      setActiveIndex(0)
    }
  }

  const handlePrevClick = () => {
    if (activeIndex - 1 >= 0) {
      setActiveIndex(activeIndex - 1)
    } else {
      setActiveIndex(projects.length - 1)
    }
  }

  const setActiveClass = (index) => {
    if (activeIndex === index) {
      return " active"
    } else {
      return " inactive"
    }
  }

  return (
    <>
      <div ref={projectsRef} className="projects_wrapper ">
        {projects.map((project, index) => (
          <div
            data-index={index}
            className={`project ${setActiveClass(index)}`}>
            <img className="project_img" src={project.url} alt="." />
            <div className="project_description">
              <p className="project_description_text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
            </div>
            <h2 className="project_title">{project.title}</h2>
            <div className="project_btns">
              <div className="btn_prev" onClick={() => handlePrevClick()}>
                <ArrowLeft />
              </div>
              <div className="btn_next" onClick={() => handleNextClick()}>
                <ArrowRight />
              </div>
            </div>
          </div>
        ))}
      </div>
    </>
  )
}

this is basically what I'm trying to get in a simple form:
<div classname="project inactive">
<div classname="project inactive prev">
<div classname="project active current">
<div classname="project inactive next">
<div classname="project inactive">

I want to do this so I can apply a specific transition when incrementing/decrementing the current index.

A: you can achieve this by using the index of the arrays like this
const isPrev = index + 1 === activeIndex
const isNext = index === activeIndex + 1

this code should be inside your map function
