CODEWITHSUNDEEP
cssreactjs
nathan
nathan

Reputation: 369

Create a dropdown animation in react

How can I create dropdown animation when I click to 3 dots and if I click one more time it will toggle the dropdown.

enter image description here

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>
  );
};

Upvotes: 0

Views: 2484

Answers (1)

Bart Krakowski
Bart Krakowski

Reputation: 1670

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

Upvotes: 1

Related Questions