Trigger animated div each time is pressed with React / Next.js-CodePudding

I'm new with React and Next.js, I'm creating a timeline, the timeline has colored bars which if pressed, the page shows a div below with info about each bar.

I managed to make the content below appear and disappear with useState hook so the content of each bar doesn't stack, I'm using an animated tag "Section" and only the first time I press any bar, the content is animated, the rest appears statically, I'm wondering if I can use something like the useEffect hook to maybe re-render each content div so the animation appears every time you click each bar, also to erase the last loaded div so doesn't stack on browser memory, I hope I explained myself I started with React 2 days ago, and thank you for your time.

Example reduced code:

//useState hook
const [content, setContent] = useState(null);

//Timeline section
<div>
    <Bar1 onClick={() => setContent(BarContent_1)}/>
    <Bar2 onClick={() => setContent(BarContent_2)}/>
</div>

//Content display
<div>
    {content}
</div>

//Content of each bar, (<Section> div has the animation)
const BarContent_1 = () => {
    return (
        <Section>
           Content of bar 1
        </Section>
    )
}
const BarContent_2 = () => {
    return (
        <Section>
           Content of bar 2
        </Section>
    )
}

CodePudding user response：

you can use useState for that to toggle classList on element here is example below what I do, in your project I don't know what you do but I will come up with card example first as your default value set state to false in card component and when you will click the button toggle that boolean false to true

like that () => setState(!state) it will always set the value of opposite state

when you will change state component always re-renders and checks the state, and you will make like that on more info div, if that state is true show more-info active that means your div will be displayed

and if it is false it will be dissapeared

const Card1 = () => {
  const [showMore, setShowMore] = useState(false)

  return (
    <div className="card">
      <div>Daniel</div>
      <button onClick={() => setShowMore(!showMore)}>Show More</button>
      <div class={showMore ? "more-info active": "more-info"}>This is more info Daniel</div>
    </div>
  )
}

also here is my css what I do

.more-info{
  opacity: 0;
  transition: 0.5s ease;
}
.active{
  opacity: 1
}

in start thats good to make stuff like that but I would recommend you to use array objects for that to .map() components and make toggling animations on that, good luck

also quickly I made working example on sandbox

CodePudding user response：

@callmenikk gave me an idea to use a conditional to render my styled div every time the condition met.

Solution:

//useState hook
const [content, setContent] = useState(null);

//Conditional function 'Refresh'
const Refresh = ({children}) => {
        const active = content != setContent
        if (active) {
            return (
                <Section>
                    {children}
                </Section>
            )
        }
    }

//Timeline section
<div>
    <Bar1 onClick={() => setContent(BarContent_1)}/>
    <Bar2 onClick={() => setContent(BarContent_2)}/>
</div>

//Content display and wrapping the content in my Refresh function
<Refresh>
    {content}
</Refresh>

//Content of each bar, no need to wrap content in my styled (Section) tag since my Refresh button will
const BarContent_1 = () => {
    return (
        <div>
           Content of bar 1
        </div>
    )
}
const BarContent_2 = () => {
    return (
        <div>
           Content of bar 2
        </div>
    )
}