So I'm displaying page2 component after clicking the button as the setShowForm sets my state to true. So the problem I'm having now is how do I navigate back to my Page1 component as I have to display Page3 in Page1 so the ternary expression might seems a little bit complicated. I've tried using React-router-dom and useHistory, both of them doesnt work as I'm not switching between pages, just within a div.
<div className={styles.ticketBox}>
{ !showForm ? (
//some UI code
<div className={styles.whitelistBox}>
<Button className={styles.whiteListToggleButton} shape="round" onClick={() => setShowForm(() => true)}>Whitelist</Button>
</div>
</div>
) : (
<Page2 />
)}
Pretty close, but to setShowForm you don't want to pass a function in, you just want to set it to true, ex:
// defining useState variables
const [showForm, setShowForm] = useState(false);
// setting to true
setShowForm(true)
// setting to true on click
onClick={() => setShowForm(true)}