Simple Breadcrum Logo In Jsx Of React Binding

{breadcrumbs.map((obj,i) =>

{i} > 1 ? '|' : {obj}

)} I wan

Solution 1:

Write it like this:

var breadcrumb = ['food','hotdogt', 'a', 'b', 'c'];

varApp = () => {
   return(
       <div>
          {
             breadcrumb.map((obj,i) => {
                return <spankey={obj}><spanclassName="bold"> {obj} </span>
                           {i != breadcrumb.length -1 ? <spanclassName="seperator"> -> </span> : null} 
                       </span>
             })
          }
       </div>
   )
}

ReactDOM.render(<App/>, document.getElementById('app'))

.bold {
  font-weight: bold;
}

.seperator {
  color: blue;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><divid='app'/>

Solution 2:

I am not sure in the syntax, as I'm not a React user, but the base logic is bad. If you doing a breadcrumb, you should put separators between the entries except the last one. Based on HJ Cross's answer, here is the correct code you looking for:

var arry = ['books','javascript', 'reactJS'];
ReactDOM.render(
  <div>
    {arry.map((obj,i) => 
      <pkey={i}><spanclassName="bold">{obj}</span>{
        i < arry.length - 1 
          ?  <spanclassName="seperator">-&gt;</span>
          : <spanclassName="none"></span>
      }</p>
    )}
  </div>,
  document.getElementById('container')
);

Solution 3:

You can call a function to render the conditional components like

classAppextendsReact.Component {
  conditionalRender(i, len) {
   if (i < len -1) 
   return<spanclassName="seperator">-></span> 
   
  }
  render() {
  
    var breadcrumbs = ['books','javascript', 'something'];
    
    return (
         <div>{breadcrumbs.map((obj,i) => 
              <span><spanclassName="bold"> {obj} </span>{this.conditionalRender(i, breadcrumbs.length)} </span>
          )}</div>
    )
  }
 }
 ReactDOM.render(<App/>, document.getElementById('app'))

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><divid="app"></div>

Solution 4:

One problem with this code is with syntax. Curly braces are placed improperly and elements should not be strings, ie. the spans.

The other issue is how you are trying to handle separators and their classes. You need to insert a separator before all elements except the first. One way to do this is with a reduce that modifies the array before you map it.

A side point, place a key on all mapped items.

Here's what it looks like working:

  <p>
    {['books','javascript'].reduce((all, one, i) => {
        i > 0 && all.push('->');
        all.push(one);
        return all;
    }, []).map((obj, i) =><spankey={i}className={i%2 ? 'seperator' : 'bold'}>{obj}</span>
    )}
  </p>

https://jsfiddle.net/q0vt53po/1/