javascript - Reveal component only on the clicked element

Question

I have a group of rendered items:

I want to attach a dropdown on each of a single element when I click on that 3 dots in a toggling form. But when I click on one of the components I get it revealed on all elements:

This is a component that is rendered:

const ClassItem = ({
  id,
  ...
  name,

}) => {
 ...

  return (
    <>
      <div id={id} className={`class-pill${attending ? ' attending' : ''}`}>
        <p className='class-name subtitles bold'>{name}</p>
        <div className='date-time'>
          <p className='body regular'>{date}</p>
          <p className='body regular'>{time}</p>
        </div>
        <p className='teacher-name body regular'>{teacher}</p>
        <div className='icon-type'>
          {showStatus()}
          <p className='body regular'>{status}</p>
        </div>
        {edit && (
          <button
            id={id}
            onClick={onClick}
            className='icon-more-vertical'
          ></button>
        )}
      </div>
    </>
  );
};

And this is the component where is rendered:

....
  const openBubble = (event) => {
    console.log('ID', event.target);
    displayBubble(!bubble);
  };

  const Bubble = ({ display }) => {
    return (
      <div className={`bubble ${display ? 'display' : 'hide'}`}>
        EDIT, CANCEL
      </div>
    );
  };
...
 return (
              <>
                <ClassItem
                  id={item.classId}
                  key={item.classId}
                  edit={editClass}
                  attending={isAttending}
                  name={item.className}
                  date={moment(item.datetime).format('MMMM Do YYYY')}
                  time={moment(item.datetime).format('LT')}
                  teacher={teacherName}
                  status={item?.status}
                  onClick={() => openBubble(item)}
                />
                <Bubble display={bubble} />
              </>
            );
          })}

...

What is wrong with this implementation?

question from:https://stackoverflow.com/questions/66054821/reveal-component-only-on-the-clicked-element

Answer 1

From the attached code snippet it seems like you are sharing the same state across all items. I would suggest to try a simple

const [closed, setClosed] = useState(false)

inside the ClassItem component in order to keep the state of the Bubble