How to hide text and display different text when button is clicked?

Question

I am using a library called thirdweb for communicating with web3, but my app is written with nextjs. I want the text above the buttons to read " your wallet xyz is connected" but only AFTER they have clicked on connect and connected.

    const[totalSupply, setTotalSupply] = useState(0);
    const[inProgress, setInProgress] = useState(false);
    const[completed, setCompleted] = useState(false);
    const address = useAddress();
    const connectWithMetamask = useMetamask();
    const disconnect = useDisconnect();
    const editionDrop = useEditionDrop("0xB636C1a63C3b092a7c74304B1947B0162D08a1e4");
    console.log(address);


    const mint = async () => {
        if(editionDrop && address){
            setInProgress(true);
            const tx = await editionDrop.claimTo(address, 0, 1)
            console.log(tx);
            setInProgress(false);
            setCompleted(true);
        }
    }

    const viewOpensea = () => {
        const url = "https://testnets.opensea.io/collection/1-year-anniversary"
        window.open(url, "_blank");
    }

    const startOver = () => {
        setCompleted(false);
        setInProgress(false);
        disconnectWallet();
    }

    useEffect(()=>{
        const getTotal= async () => {
            if(editionDrop){
                const total = await editionDrop.totalSupply(0)
                setTotalSupply(total.toNumber());
            }
        }
        getTotal();
    }, [editionDrop])

  return (
    <Container>
        <Mint>

            <TitleContainer>
                <Title>Welcome to the <br/> Redbrick NFT site</Title>
            </TitleContainer>

            <Count>
                <div>
                Your wallet {address} is connected!
                </div>
            </Count>

            <ButtonContainer>
                {
                    address 
                        ? <>
                            {
                            completed 
                                ?
                                <FilledButton onClick={viewOpensea}>View on OpenSea</FilledButton>
                                :
                                <FilledButton disabled={inProgress}onClick={mint}>
                            {
                                inProgress 
                                    ?<ReactLoading type="bubbles" color="#FFFFFF" height={30} width={65} />
                                    :
                                    <>mint</>
                            }
                             </FilledButton>
                        }
                        <UnfilledButton onClick={disconnect} disabled={inProgress}>Disconnect</UnfilledButton>
                        </>
                        : <FilledButton onClick={connectWithMetamask}>Connect Wallet</FilledButton>

                }
            </ButtonContainer>

            

        </Mint>

    </Container>
  )
}

Right now the text: <div> Your wallet {address} is connected! </div> Count is persistently there.

Answer 1

Try using a state variable to render it whenever your condition is met.

isConnected ? <div> Your wallet {address} is connected! </div> : null

Default isConnected to false, then set it to true whenever the wallet is connected.