I'm new to react and trying to change two states with one button click. Ultimately I want to hide one component and unhide the other when I click a button.
The code works when changing one state, but not with two
import React from 'react'
import Buttons from './Buttons'
import SignUp from './SignUp'
import SignIn from './SignIn'
import { useState } from 'react'
const Intro = () => {
const [showButtons, setShowButtons] = useState(true)
const [showSignIn, setShowSignIn] = useState(false)
const showSignInBtn = () => (showSignIn === false) ? setShowSignIn(true)
setShowButtons(false) :
setShowSignIn(false)
const [showSignUp, setShowSignUp] = useState(false)
const showSignUpBtn = () => (showSignUp === false) ? setShowSignUp(true) :
setShowSignUp(false)
return (
<div className='introBox'>
<div className='titleMicroReactor'>
CARDIFF MICROREACTOR
</div>
{showButtons && <Buttons showSignInBtn={showSignInBtn} showSignUpBtn=.
{showSignUpBtn}/>}
{showSignIn && <SignIn />}
{showSignUp && <SignUp/>}
</div>
)
}
export default Intro
the showSignIn function is where it goes wrong, thanks in advance
I think you don't need two states like showSignIn and showSignUp.
Just check with one of them.
For example:
{showSignIn ? <SignIn /> : <SignUp />}
If showSignIn is true show <SignIn /> else show <SignUp />
You can use regular if else
const showSignInBtn = () => {
if (!showSignIn) {
setShowSignIn(true)
setShowButtons(false)
} else {
setShowSignIn(false)
}
}