I am facing a challenging background error warning that I am struggling to solve. As a beginner, I understand the need to change li, but I'm not sure where to begin. Can someone please assist me with this error warning:
next-dev.js?3515:20 Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>.
at li
at li
at ul
at div
at div
at Top (webpack-internal:///./components/header/Top.js:28:84)
at header
at Header (webpack-internal:///./components/header/index.js:18:11)
at div
at Home
at PersistGate (webpack-internal:///./node_modules/redux-persist/es/integration/react.js:39:5)
at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:13:3)
at MyApp (webpack-internal:///./pages/_app.js:22:11)
at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:301:63)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:850:919)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:62:1)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:172:11)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:347:11)
I am hopeful that someone can guide me in rectifying this issue. Like an obsessive-compulsive person, I find it difficult to ignore the red color of the background. Here is my original piece of code:
import styles from "./styles.module.scss";
import { MdSecurity } from "react-icons/md";
import { BsSuitHeart } from "react-icons/bs";
import { RiAccountPinCircleLine, RiArrowDropDownFill } from "react-icons/ri";
import Link from "next/link";
import { useState } from "react";
import UserMenu from "./UserMenu";
export default function Top() {
const [ loggedIn, setLoggedIn ] = useState(true);
const [visible, setVisible] = useState(false);
return (
<div className={styles.top}>
<div className={styles.top_container}>
<div></div>
<ul className={styles.top_list}>
<li className={styles.li}>
<MdSecurity />
<span>Buyer Protection</span>
</li>
<li className={styles.li}>
<span>Customer Service</span>
</li>
<li className={styles.li}>
<span>Help</span>
</li>
<li className={styles.li}>
<BsSuitHeart />
<Link href={"/profile/wishlist"}>
<span>Wishlist</span>
</Link>
</li>
<li
className={styles.li}
onMouseOver={() => setVisible(true)}
onMouseLeave={() => setVisible(false)}
>
{loggedIn ? (
<li className={styles.li}>
<div className={styles.flex}>
<img
src={"/"}
width={22}
height={22}
alt=''
/>
<RiArrowDropDownFill />
</div>
</li>
) : (
<li className={styles.li}>
<div className={styles.flex}>
<RiAccountPinCircleLine />
<span>Account</span>
<RiArrowDropDownFill />
</div>
</li>
)}
{visible && <UserMenu loggedIn={loggedIn} />}
</li>
</ul>
</div>
</div>
);
}