I got this error called "TypeError: Cannot read properties of undefined (reading 'split')" I am aware of where the error came from, but I don't know how to put the right code in it. I am using Next.js and TailwindCSS :)
The code below is what I wrote:
{productCategories.map(m => (
<li className="group relative hover:cursor-pointer" key={m.databaseId} onClick={() => onClickParentMenu(m.databaseId)}>
<Link passHref href={`/${m.url.split('/').splice(2, 2).join('/')}`}>
<a className={`${router.asPath === '/' ? 'hover:text-white' : 'text-black hover:opacity-50'} ${clickedParentId === m.databaseId && 'font-bold'}`}>{m.name}</a>
</Link>
<ul className="absolute hidden text-gray-500 pt-4 group-hover:block">
{m.children.nodes.map(c => (
<li key={c.databaseId} className="w-auto whitespace-nowrap shadow-md bg-white hover:bg-gray-100 hover:text-black py-2 px-4 block" onClick={() => onClickChildMenu(c.databaseId)}>
<Link passHref href={`/product-category/${m.slug}/${c.slug}`}>
<a className={`${clickedChildId === c.databaseId && 'font-bold'}`}>{c.name}</a>
</Link>
</li>
))}
</ul>
</li>
))}
The code that makes the error:
<Link passHref href={`/${m.url.split('/').splice(2, 2).join('/')}`}>
Inside the same file of your component, you can define:
function extractURL(category) {
if (!category.url) {
// handle the problem somehow and return an appropriate value
}
return `/${category.url.split('/').splice(2, 2).join('/')}`;
}
And call it like:
<Link passHref href={extractURL(m)}>...</Link>
For example, you can insert any JavaScript code into the map and return the JSX code via return:
{productCategories.map(m => {
let href = '';
if (m.url) {
href = m.url.split('/').splice(2, 2).join('/');
}
return (
<li className="group relative hover:cursor-pointer" key={m.databaseId} onClick={() => onClickParentMenu(m.databaseId)}>
<Link passHref href={`/${href}`}>
<a className={`${router.asPath === '/' ? 'hover:text-white' : 'text-black hover:opacity-50'} ${clickedParentId === m.databaseId && 'font-bold'}`}>{m.name}</a>
</Link>
<ul className="absolute hidden text-gray-500 pt-4 group-hover:block">
{m.children.nodes.map(c => (
<li key={c.databaseId} className="w-auto whitespace-nowrap shadow-md bg-white hover:bg-gray-100 hover:text-black py-2 px-4 block" onClick={() => onClickChildMenu(c.databaseId)}>
<Link passHref href={`/product-category/${m.slug}/${c.slug}`}>
<a className={`${clickedChildId === c.databaseId && 'font-bold'}`}>{c.name}</a>
</Link>
</li>
))}
</ul>
</li>
)
})}