Create a dropdown animation in react - css

Question

How can I create dropdown animation when I click to 3 dots and if I click one more time it will toggle the dropdown.
Here is my following code:
const [modalStatus, setModalStatus] = useState(false);
const openModal = () => {
setModalStatus(true);
};
<div className="member-edit" onClick={openModal}>
<Symlink />
</div>
{modalStatus && <TeamStatusModal />}
<div
className="member-avatar"
style={{
backgroundImage: `url(${member.User.picture})`,
}}
/>
<div className="member-description">
<p className="member-name">{member.User.fullname}</p>
<p className="member-date">
Joined on {moment(member.date_joined).format("MMMM Do, YYYY")}
</p>
</div>
Updated add TeamStatusModal.js:
const TeamStatusModal = () => {
return (
<div className="team-status-modal-container">
<div className="status">
<ProfileIcon /> <span>View Profile</span>
<hr />
</div>
<div className="status">
<MessageIcon /> <span>Message Me</span>
<hr />
</div>
<div className="status">
<ReviewIcon /> <span>Leave Review</span>
</div>
</div>
);
};

Answer 1

You should reorganize the logic a bit. Intead of: {modalStatus && <TeamStatusModal />} you can pass the state as a prop like this:
<TeamStatusModal active={modalStatus} />
and then you will use it in the TeamStatusModal component:
const TeamStatusModal = ({ active }) => {
return (
<div className={`team-status-modal-container ${active ? 'ACTIVE_CLASS' : ''}`}>
<div className="status">
<ProfileIcon /> <span>View Profile</span>
<hr />
</div>
<div className="status">
<MessageIcon /> <span>Message Me</span>
<hr />
</div>
<div className="status">
<ReviewIcon /> <span>Leave Review</span>
</div>
</div>
);
};
Another approach is using e.g. Framer Motion library, which allows animate removing elements from DOM.
https://www.framer.com/api/motion/animate-shared-layout/#syncing-layout-animations