How can I write Javascript function in React JSX?

Question

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

Presumably the m.url is undefined. You'd need to make sure that it's defined before trying to do things with it. — yaakov
– yaakov, Commented May 10, 2022 at 7:05

moonwave99 · Accepted Answer · 2022-05-10 07:04:34Z

1

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>

answered May 10, 2022 at 7:04

moonwave99

22.9k3 gold badges48 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Siddi · Accepted Answer · 2022-05-10 07:08:09Z

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

Collectives™ on Stack Overflow

How can I write Javascript function in React JSX?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related