Toggling between components on a click in React.js - reactjs

Question

I have a component which acts as the front of my single page site.
I have the following within that:
<div className="flex mb-0 items-center">
<h2 className="capitalize tracking-tight text-4xl mt-16 mr-8 md:mt-24 font-black hvr-underline-from-left pb-1">
recent projects
</h2>
<h2 className="capitalize tracking-tight text-4xl mt-16 md:mt-24 font-black text-gray-400 hvr-underline-from-left pb-1">
open source
</h2>
</div>
<Projects />
<OpenSource />
Currently I have the components displaying underneath each other. I want to be able to Toggle between the two, if a user clicks "recent projects" it shows the <Projects /> component. If a users clicks "open source" it hides the <Projects /> component and displays the <OpenSource/> one.
I would love to create an animation like a slide with something like react spring. But happy to just have them toggling at the moment.
any advice?

Answer 1

import React, { useState, useCallback } from "react";
export default function App() {
const [activeComponent, setActiveComponent] = useState("projects");
const modifyActiveComponent = useCallback(
newActiveComponent => {
setActiveComponent(newActiveComponent);
},
[setActiveComponent]
);
return (
<>
<div className="flex mb-0 items-center">
<h2
onClick={() => modifyActiveComponent("projects")}
className="capitalize tracking-tight text-4xl mt-16 mr-8 md:mt-24 font-black hvr-underline-from-left pb-1"
>
recent projects
</h2>
<h2
onClick={() => modifyActiveComponent("open_source")}
className="capitalize tracking-tight text-4xl mt-16 md:mt-24 font-black text-gray-400 hvr-underline-from-left pb-1"
>
open source
</h2>
</div>
{activeComponent === "projects" && <h1>Projects</h1>}
{activeComponent === "open_source" && <h1>OpenSource</h1>}
</>
);
}
Above I created a simple example to toggle two components. I used the useState hook to save the active component. I added the useCallback hook to code as well to handle the click on an item and update the active component afterwards.
You can play demo: https://codesandbox.io/s/lucid-carson-jghdi?file=/src/App.js:0-1042

Answer 2

I made this example with react transition group: https://codesandbox.io/s/epic-curie-nq3wo?file=/src/App.js
There you can see the animation effect, you can define of each transition and a lot of funny stuff.
(I did a small trick in the .section-exit to be able to show a smooth transition, which is the position: absolute without overlapping sections.
Documentation: https://github.com/reactjs/react-transition-group
JS: https://codesandbox.io/s/epic-curie-nq3wo?file=/src/App.js
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { CSSTransition } from "react-transition-group";
import "./styles.css";
function App() {
const sections = ["PROJECTS", "OPENSOURCE"];
const [activeSection, setActiveSection] = useState(sections[0]);
const setProject = () => setActiveSection(sections[0]);
const setOpenSource = () => setActiveSection(sections[1]);
return (
<div>
<button onClick={setProject}>Project</button>
<button onClick={setOpenSource}>Open Source</button>
<CSSTransition
classNames="section"
in={activeSection === sections[0]}
timeout={300}
unmountOnExit
>
<h1>Projects</h1>
</CSSTransition>
<CSSTransition
classNames="section"
in={activeSection === sections[1]}
timeout={300}
unmountOnExit
>
<h1>Open Source</h1>
</CSSTransition>
</div>
);
}
export default App;
CSS: https://codesandbox.io/s/epic-curie-nq3wo?file=/src/styles.css
.section-enter {
opacity: 0;
transform: translateX(100%);
}
.section-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 300ms, transform 300ms;
}
.section-exit {
opacity: 1;
position: absolute;
}
.section-exit-active {
opacity: 0;
transform: translateX(100%);
transition: opacity 300, transform 300;
}
There you can see the effect.