I've two React components, I want a button click in one to replace it entirely with the second.
So my first Component is delivered inside App root,
function App(){
return (
<div>
<Landing />
</div>
)
}
export default App;
Inside landing, I want a button click to replace it in App with a different Component Marketing. This is not a child Component and they're at the same level.
I'm new to React and have no idea how to do this. Any help appreciated.
You can achieve this by using conditional rendering. You want to create a boolean var in App (myBool) and a function (toggleBool) that flips that var. Then you can pass this function as a prop to each component to use as an event for your button. Then you can conditional render these components in App.
import { useState } from "react";
import "./styles.css";
function App() {
const [myBool, setmyBool] = useState(true);
function toggleBool() {
setmyBool(!myBool)
}
return (
myBool ? <Landing toggleBool={toggleBool} /> : <Marketing />
);
}
function Landing(props){
return (
<div>
<h1>Landing</h1>
<button onClick={props.toggleBool}>Button</button>
</div>
)
}
function Marketing(props){
return (
<h1>Marketing</h1>
)
}
If you want to be able to toggle back to Landing from Marketing, you can pass the toggleBool function into Marketing like how its done to Landing and use the button the same way.
I've used something like this for showing a loading screen while fetching data from the database. I've also used something similar to this for changing themes with a button.
// create pressed state
const [pressed, setPressed] = useState(false);
// onClick() function
function press() {
if (pressed == false) setPressed(true) else setPressed(false)
}
// true or false // change component
const component = pressed ? <NotLanding onClick(press) /> : <Landing onClick(press) />
function App() {
return (
<div>
{component} {/* component that will switch onClick() */}
</div>
)
}
Appwould maintain some state for toggling between the two components, and pass a function for setting it down to<Landing/>.