promise funtion for returning react components-CodePudding

Does anyone have a fix for this if-else won't work in run build, but will in run dev. The only way to make this work is to use a react hook but I don't have the slightest idea of which one and where to implement it.

import { useAddress } from "@thirdweb-dev/react";
import Head from 'next/head';
import Link from 'next/link';
import Username from '../components/Username';
import React from "react";



const Home = () => {

    let p = new Promise((resolve, reject) => {
        let address = useAddress();
        if (address) {
            resolve(address)
        } else {
            console.log('no addy')
            reject()
        }
    })

    p.then((address) => {
        return (
            <>
                <Head>
                    <title>DRUMM3R</title>
                    <link rel="icon" href="/drum.svg" />
                </Head>
                <Username address={address} />
            </>
        );
    }).catch(() => {
        return (
            <>
                <Head>
                    <title>DRUMM3R</title>
                    <link rel="icon" href="/drum.svg" />                
                </Head>
                <Link href="/">
                    <a className="absolute pt-1 text-xl font-semibold transform -translate-x-1/2 top-1/2 left-1/2">click here to log in</a>
                </Link>
            </>
        );
    })        
}

export default Home;

CodePudding user response：

Why don't you try this solution:

import { useEffect, useState } from "react"

const Home = () => {
  const [address, setAddress] = useState(null)

  useEffect(() => {
    const address = useAddress()
    setAddress(address)
  }, [])

  if (address) {
    return (
      <>
        <Head>
          <title>DRUMM3R</title>
          <link rel="icon" href="/drum.svg" />
        </Head>
        <Username address={address} />
      </>
    )
  }

  return (
    <>
      <Head>
        <title>DRUMM3R</title>
        <link rel="icon" href="/drum.svg" />
      </Head>
      <Link href="/">
        <a
          className="absolute pt-1 text-xl font-semibold transform -
         translate-x-1/2 top-1/2 left-1/2"
        >
          click here to log in
        </a>
      </Link>
    </>
  )
}

CodePudding user response：

import { useAddress } from "@thirdweb-dev/react";
import Head from "next/head";
import Link from "next/link";
import Username from "../components/Username";
import React from "react";

const Home = () => {
  const address = useAddress();

  const content = address ? (
    <Username address={address} />
  ) : (
    <Link href="/">
      <a className="absolute pt-1 text-xl font-semibold transform -translate-x-1/2 top-1/2 left-1/2">
        click here to log in
      </a>
    </Link>
  );

  return (
    <>
      <Head>
        <title>DRUMM3R</title>
        <link rel="icon" href="/drum.svg" />
      </Head>
      {content}
    </>
  );
};

export default Home;