So I have this div that switch from one component to another by changing the state after clicking on a button.
{ !showForm ? (
<div className={styles.showTicketContainer}>
<div className={styles.showTicketBox}>
//some code for UI
</div>
<div className={styles.whitelistBox}>
<Button className={styles.whiteListToggleButton} shape="round" onClick={() => setShowForm(() => true)}>Whitelist</Button>
</div>
</div>
) : (
<InputEmail /> // render another component within this div after clicking the whitelist button
)}
So to visualize this is from this to this. And I would like to add one button on the email page so that I can go back to the first page.
Do I still use the same way which is:
{ !showForm ? (
//some UI code
) : (
<someComponent/>
)}
or is there any better way to do this.
you can use this:
const history = useHistory();
history.goBack();
If you're creating pages, I definitely suggest using React Router or a similar library to handle this. With React Router, you can easily "back" out to the previous page, and even the "back" button in the user's browser will work, instead of having to click a button.
This code will work. Add them wherever required..
import { useHistory } from "react-router-dom";
function demo () {
let history = useHistory();
const goToPreviousPath = () => {
history.goBack()
}
return (
<div>
<Button
onClick={goToPreviousPath}
>
Back
</Button>
</div>
):
}