React - How to make react-icon rotate 180 degrees onClick?

Question

I have a React component called Collapsible that contains a react-icon named FaArrowDown. How do I make the icon rotate 180 degrees every time a user clicks on it? I have already tried to make it rotate using state but without success. This is the content of the Collapsible.js:

import React, { useState } from "react";
import styled from "styled-components";
import { FaArrowDown } from "react-icons/fa";
import './Collapsible.css'

export const ButtonWrapper = styled.div`
  font-size: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 25px;
  //transform: rotateX(180deg);

  &:hover {
    font-size: 30px;
  }
`

const Collapsible = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="collapsible">
      <ButtonWrapper className="toggle" >
        <h3 className="my_header" style={{paddingBottom: 25, fontSize: '20px', cursor: "pointer"}} >Best foods</h3>
        <FaArrowDown onClick={() => setIsOpen(!isOpen)} style={{cursor: "pointer", transition: "all 0.2s linear"}} />
      </ButtonWrapper>
      <div className={isOpen ? "content show" : "content"}>{props.children}</div>
    </div>
  );
};

export default Collapsible;

Answer 1

You could wrap your icon with a styled-component and use css transitions:

// Wrap FaIcon in styled component
const StyledIcon = styled((props) => {
  <FaArrowDown {...props} />
})`
  cursor: pointer;
  transition: transform 0.3s ease-out;

  ${props => props.active && css`
    transform: rotate(180deg);
  `}

`;

// And use it like:
<StyledIcon onClick={() => setActive(!isOpen)} active={isOpen} />

Answer 2

You can style the icon using styled-components, just pass it to the styled function like this styled(FaArrowDown) , and then conditionally rotate the icon when the ButtonWrapper is clicked. We track the open state and pass it as props to our Toggle icon. Our code will look like this:

Collapsible.styled.js

import styled from "styled-components";
import { FaArrowDown } from "react-icons/fa";

export const ButtonWrapper = styled.div`
  font-size: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 25px;

  &:hover {
    font-size: 30px;
  }
`

export const ToggleIcon = styled(FaArrowDown).attrs(
  (props) => ({})
)`
  color: rgb(77, 77, 77);
  font-size: 30px;
  position: relative;
  cursor: pointer;
  transition: transform 0.25s ease 0s;
  
  //Rotate the icon if active is true, that is when the icon is open

  ${(props) =>
    props.active &&
    `
      transform: rotate(180deg);
    `}
`;

Collapsible.js

import React, { useState } from "react";
import { ButtonWrapper, ToggleIcon } from "./Collapsible.styled"

const Collapsible = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="collapsible">
      <ButtonWrapper className="toggle" onClick={() => setIsOpen(!isOpen)}>
        <h3 className="my_header" style={{paddingBottom: 25, fontSize: '20px', cursor: "pointer"}}>Best foods</h3>
        <ToggleIcon active={isOpen} />
      </ButtonWrapper>
      <div className={isOpen ? "content show" : "content"}>{props.children}</div>
    </div>
  );
};

export default Collapsible;