Tengo un componente React llamado plegable que contiene un icono de reacción llamado FaArrowDown. ¿Cómo hago que el ícono gire 180 grados cada vez que un usuario hace clic en él? Ya he intentado hacerlo rotar usando el estado pero sin éxito. Este es el contenido del 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;Puede envolver su ícono con un componente con estilo y usar transiciones css:
// 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} />