reactjs - How to add a className to single .map item?

Question

I want to add className to a .map item, but only for the one which is clicked.

Tried useState ( {state ? "class" : ""} ) but it added class for all items inside my loop. I also tried useRef but I learned that useRef does not cause re-render so result didn't update on screen.

example code:

    {posts.map((post)=> {
      return (
        <div className=`PLACE FOR CLASS` key={post.id}>
        {post.title}
        <button onClick={()=> onclick event to add class}>add</button>
        </div>
      )
    })}

So what is the way to add class only for item which is clicked in this case? ( I think I need to use Key but don't know how )

question from:https://stackoverflow.com/questions/65934907/how-to-add-a-classname-to-single-map-item

Answer 1

If you don't want to add this information to the main state (posts) you can create a separate list of selected ids, it'll be something like this (assuming you're using function components)

const [selectedPosts, setSelectedPosts]=useState([]);
...
{posts.map((post)=> {
  return (
    <div className={selectedPosts.includes(post.id) && "myClass"} key={post.id}>
    {post.title}
    <button onClick={()=> {setSelectedPosts(s => [...s, post.id])}}>add</button>
    </div>
  )
})}