title: How can I write Javascript function in React JSX?
body: <p>I got this error called <strong>&quot;TypeError: Cannot read properties of undefined (reading 'split')&quot;</strong>
  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 :)</p>
  <p>The code below is what I wrote:</p>
  <pre class="lang-html prettyprint-override"><code> {productCategories.map(m =&gt; (
            &lt;li className=&quot;group relative hover:cursor-pointer&quot; key={m.databaseId} onClick={() =&gt; onClickParentMenu(m.databaseId)}&gt;
              &lt;Link passHref href={`/${m.url.split('/').splice(2, 2).join('/')}`}&gt;
                &lt;a className={`${router.asPath === '/' ? 'hover:text-white' : 'text-black hover:opacity-50'} ${clickedParentId === m.databaseId &amp;&amp; 'font-bold'}`}&gt;{m.name}&lt;/a&gt;
              &lt;/Link&gt;
              &lt;ul className=&quot;absolute hidden text-gray-500 pt-4 group-hover:block&quot;&gt;
                {m.children.nodes.map(c =&gt; (
                  &lt;li key={c.databaseId} className=&quot;w-auto whitespace-nowrap shadow-md bg-white hover:bg-gray-100 hover:text-black py-2 px-4 block&quot; onClick={() =&gt; onClickChildMenu(c.databaseId)}&gt;
                    &lt;Link passHref href={`/product-category/${m.slug}/${c.slug}`}&gt;
                      &lt;a className={`${clickedChildId === c.databaseId &amp;&amp; 'font-bold'}`}&gt;{c.name}&lt;/a&gt;
                    &lt;/Link&gt;
                  &lt;/li&gt;
                ))}
              &lt;/ul&gt;
            &lt;/li&gt;
          ))}
  </code></pre>
  <p>The code that makes the error:</p>
  <pre class="lang-html prettyprint-override"><code> &lt;Link passHref href={`/${m.url.split('/').splice(2, 2).join('/')}`}&gt;
  </code></pre>