Render component on button click to change page view with useState (or otherwise) in React - reactjs

Question

I've made a landing page for my portfolio and I'd like to have the page perform a transition animation (like a fadeout/In, but I can get to that later) then render the component of my actual portfolio instead of my landing page on the button click.
I started trying to write a function but am a bit lost with how to implement this.
I have this as my App setup so far but can't figure out how to implement the state change to render the Portfolio component instead of the HTML from App.js
import React, { useState } from "react";
import "./App.css";
// import Portfolio from "./Portfolio"
function App() {
//States
// const [view, setView] = useState();
// function viewPortfolio (
// )
return (
<div className="App">
<div className="title">
<h1 className="title maintext">Josh Bellingham</h1>
<h2 className="title subtext">Junior Web Developer</h2>
<button className="title btn">
<span>Welcome</span>
</button>
</div>
<div className="sun">
<img className="sun-img" src="Sun.png" alt="Sun" />
<div className="sun-ray r-one"></div>
<div className="sun-ray r-two"></div>
<div className="sun-ray r-three"></div>
<div className="sun-ray r-four"></div>
</div>
<div className="waves">
<img className="wave-1" src="Wave 1 (1).png" alt="Wave"></img>
<img className="wave-2" src="Wave 2 (1).png" alt="Wave"></img>
<img className="wave-3" src="Wave 3 (1).png" alt="Wave"></img>
</div>
</div>
);
}

Answer 1

just define a function in your code and call it with arrow functions or you can use the bind function. ps, it is good to use 'useMemo' or 'useCallback' hooks depending on your
function App() {
const [count, setCount] = useState(0);
//define function
const testFunction = () => {
console.log("you can call a function here ");
setCount(10); // or whatever you want to call
}
return (
<div className="App">
{/* call function */}
<button onClick={() => testFunction()}>test btn</button>
<p>{count}</p>
</div>
)
}
you can call any function with onClick method. if you just pass the function to the onClick, it will call your function when the component is being rendered and we don't want that for now, we wrap that in the arrow-function. every time you call a function and it changes any state in your component, it will cause re-rendering, so if you want to re-render you should change some states.
in the code I wrote when you click on the test btn you call testFunction and it will change the count state to 10 and it will cause re-rendering, we can use that state as I used it in the paragraph
you can read more at events or hooks ,lifecycle