In my NextJS application, I am using useState and useEffect to conditionally render a set of data tables:
const [board,setBoard] = useState("AllTime");
const [AllTimeLeaderboardVisible, setAllTimeLeaderboardVisible] = useState(false);
const [TrendingCreatorLeaderboardVisible, setTrendingCreatorLeaderboardVisible] = useState(false);
const [TrendingVideoLeaderboardVisible, setTrendingVideoLeaderboardVisible ] = useState(false)
useEffect(() => {
board === "AllTime"
? setAllTimeLeaderboardVisible(true)
: setAllTimeLeaderboardVisible(false);
board === "TrendingVideo" ? setTrendingCreatorLeaderboardVisible(true) : setTrendingCreatorLeaderboardVisible(false);
board === "TrendingCreator" ? setTrendingVideoLeaderboardVisible(true) : setTrendingVideoLeaderboardVisible(false);
}, [board]);
const handleOnChange = (e: { target: { value: SetStateAction<string>; }; }) => {
setBoard(e.target.value);
};
The visibility of the tables is controlled by a dropdown element:
<select id ="dropdown" value={board} onChange={handleOnChange} className="mb-5 rounded-full bg-black px-6 py-3 duration-100 ease-in hover:bg-white hover:fill-black hover:text-black w-80 text-3xl tracking-tight font-work">
<option value="AllTime">All Time</option>
<option value="TrendingVideo">Trending Video</option>
<option value="TrendingCreator">Trending Creator</option>
</select>
{AllTimeLeaderboardVisible && <AllTimeLeaderboard />}
{TrendingVideoLeaderboardVisible && <TrendingVideoLeaderboard />}
{TrendingCreatorLeaderboardVisible && <TrendingVideoLeaderboard />}
When setting "AllTime" as the first option value, I encountered an error in NextJS:
TypeError: Cannot read properties of null (reading 'useState')
This error specifically points to the line:
const [board,setBoard] = useState('AllTime');
How can this be a property of null?