Change inline styles to styled-components

Question

I have this code:

import React, {useState} from 'react';
import PropTypes from 'prop-types';
import styled from "styled-components";
import ArrowTemplate from "./ArrowTemplate";

const AccordionBtn = styled.button`
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    display: flex;
    align-items: center;
    border: none;
    outline: none;
    transition: background-color 0.6s ease;
    :hover,
    :focus,
    :active {
      background-color: #ccc;
    }
`;

const AccordionTitle = styled.p`
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    font-size: 14px;
`;

const AccordionContent = styled.div`
    background-color: red;
    overflow: hidden;
    transition: 0.6s;
`;

const AccordionText = styled.div`
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    padding: 18px;
`;

const AccordionSection = styled.div`
    display: flex;
    flex-direction: column;
`;

Accordion.propTypes = {
    title: PropTypes.string.isRequired,
    content: PropTypes.node.isRequired,
    id: PropTypes.string.isRequired,
};

function Accordion(props) {
    const [isAccordionExpanded, setIsAccordionExpanded] = useState(false);
    const toggleAccordion = () => {
        setIsAccordionExpanded(!isAccordionExpanded);
    };
    return (
        <AccordionSection>
            <AccordionBtn onClick={toggleAccordion}>
                <AccordionTitle>
                    {props.title}
                </AccordionTitle>
                <ArrowTemplate
                    color={'black'}
                    direction={isAccordionExpanded === true ? 'up' : 'down'}
                    onClick={toggleAccordion}
                />
            </AccordionBtn>
            <AccordionContent
                style={{height: isAccordionExpanded === true ? "100px" : "0"}}
                >
                <AccordionText>
                    {props.content}
                </AccordionText>
            </AccordionContent>
        </AccordionSection>
    );
}

export default Accordion;

What this code does, is extends the accordeon on click. Preety simple. But now, I want to move this height:

<AccordionContent
    style={{height: isAccordionExpanded === true ? "100px" : "0"}}
>

here:

const AccordionContent = styled.div`
        background-color: red;
        overflow: hidden;
        transition: 0.6s;
    `;

The problem is I need to use state, and if I declare it in the function, it will get re-rendered, and not run the animation. How can I pass the state to the styled-component?

Answer 1

You can just pass the isAccordionExpanded directly to the styled component. Change your style from this:

const AccordionContent = styled.div`
    background-color: red;
    overflow: hidden;
    transition: 0.6s;
`;

to include this

height: ${({ isAccordionExpanded }) => (isAccordionExpanded ? "100px" : "0"};

Another way to do animation in React is using React Transition Group , Quite good