For background on the problem, my code was working fine in run dev with if-else statements however in run build the if-else didn't work so now I'm trying new ways of conditionally rendering a page. This one is the most promising however the return statement inside doesn't work. Is there a fix? If I replace it with a console.log it returns the text to the console, so it has something to do with the promise.
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;The issues isn't with Next, its that React expects a valid JSX element to be returned. Your function doesn't return anything, implicitly returning undefined and that will break.
So what you need to do is either have some type of effect (if you're doing something async) that will setState and render the appropriate element (loading indicator, error message, or data, etc) or you need to have that data already there for the component to render.
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();
return address ? (
<>
<Head>
<title>DRUMM3R</title>
<link rel="icon" href="/drum.svg" />
</Head>
<Username address={address} />
</>
) : (
<>
<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>
</>
);
};You can do something like this and it should work.