Question 187603 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to use > in react jsx?

{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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
      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.


  2. 0 
    {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
}, [])}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search