-2
{crumbs.map((item, idx) => {
    return (<Link href={item.href}>{item.label}</Link>)
})}

I want to add an optional &gt; if idx < crumbs.length -- I keep getting parsing errors no matter what I try.

chovy
  • 72,281
  • 52
  • 227
  • 295
  • you want crumbs like this: crumb1 > crumb2 > ... > crumbn, right? and you want to add render a special character > when idx < crumbs.length? – cuongdevjs Jun 16 '23 at 07:25
  • Please include the error then (in your question) and also show the example where it fails. Your snippet does not match your question. – F. Müller Jun 16 '23 at 07:29
  • It's unclear what you're actually doing without a [mre] but likely you're inside braces therefore just writing plain JS and should simply write `">"`. It's important when writing JSX to keep track of whether you're in a JS or XML context. – jonrsharpe Jun 16 '23 at 07:30

2 Answers2

-1
{crumbs.reduce((out, item, i) => {
    if (i > 0) {
        // Need to use span tag to set key property in result code
        out.push(<span>{'>'}</span>)
    }

    out.push(<Link href={item.href}>{item.label}</Link>)

    return out
}, [])}
MiF
  • 638
  • 7
  • 13
-1
  return (
      <nav className={style.breadCrumbs}>
        <>
            <Link href="/"><img src="/home.svg" alt="" /></Link>
            <span>&gt;</span>
        </> 
      {crumbs.map((item, idx) => {
            if (idx === crumbs.length-1 ) {
                return <span>{item.label}</span>
            } else {
                return <><Link href={item.href}>{item.label}</Link> <span>&gt;</span></> 
            }
        })}
      </nav>
  )

Only problem is I need to add a key here somehow.

chovy
  • 72,281
  • 52
  • 227
  • 295
  • If you have a static-item list that does not change, you can use the index, otherwise, find a better property for the key. The item.href is probably unique so ... try this. Item.label can also be used as the key btw. – F. Müller Jun 16 '23 at 15:30