How can I write Javascript function in React JSX?-CodePudding

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('/')}`}>

CodePudding user response：

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>

CodePudding user response：

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>
)
})}