I have list of array and i want to render it . React+redux

Question

I have below array , and if track is featured then i want to print it under "Feature" headline , and if track is non feature then i want to print it under "Other" headline.
And if no featured track or non featured track present then heading should not come.

 var a = [{
        isFeature:true,
        name: 'abc'

     },{
       isFeature:false,
       name: 'xyz'

     },{
      isFeature: false,
      name: 'bpl'
 }]

And on react I want to render it in below html format -

   <ul>
     <li>Feature</li> 
     <li>abc</li> 
     <li>xyz</li>
     <li>Non Feature</li> 
     <li>bpl</li>  
   </ul>

Below is my code in render() method .

 races = <ul>
            <li>Featured</li>
            {data.map(function(f)  { 
              if(f.isFeature) { return ( <li>{f.name}</li>)

              }})}
            <div>Non featured</div>
            {data.map(function(f) {
              if(!f.isFeature) { return ( <li>{f.name}</li>)}
            })}
        </ul>
}

return races

This is printing proper output but if featured track is not present , it is still rendering the header

   <li>Feature<li> 

How to add condition over it ? If i write code in below fashion , then it is returning syntax error near

 <li> 

tag in return() function.

       races = <ul>
            {data.map(function(f)  { 
              if(f.isFeature) { return ( <li>Featured</li><li>{f.name}</li>)

              }})}

            {data.map(function(f) {
              if(!f.isFeature) { return ( <li>Non featured</li><li>{f.name}</li>)}
            })}
        </ul>
}

return races

Answer 1

Try this:

let featured = [<li>Featured</li>];
let nonFeatured = [<li>Non featured</li>];

data && data.forEach(function(item) {
  if (item.isFeature) {
    featured.push(<li>{item.name}</li>)
  } else if (!item.isFeature) {
    nonFeatured.push(<li>{item.name}</li>)
  }
});

const races = (
  <ul>
    {featured.length > 1 && featured}
    {nonFeatured.length > 1 && nonFeatured}
  </ul>
);

return races;

Answer 2

You can check the data length before rendering <li>Featured</li>

 races = <ul>
            {data.filter((item) => item.isFeature).map(function(f, index)  { 
              if(index === 0) { 
                 return ( <li>Featured</li><li>{f.name}</li>)
              } else {
                 return ( <li>{f.name}</li>)
              }})}
            {data.filter((item) => item.isFeature === false).map(function(f, index)  { 
              if(index === 0) { 
                 return ( <li>Non Featured</li><li>{f.name}</li>)
              } else {
                 return ( <li>{f.name}</li>)
              }})}
        </ul>
}

Answer 3

Use two different array of list items, one is for featured another is for not featured, and before rendering the featured header check whether 1st array has length > 0 and do similar thing for Non Featured also something like this :

data.map(function(f)  { 
                 if(f.isFeature) { 
                    featured.push( <li>{f.name}</li> ) 
                 }else{
                     non_featured.push ( <li>{f.name}</li> )
                 }
             }

featured.length ? featured.unshift(<li>Featured</li>)  : "";
non_featured.length ? non_featured.unshift(<li>Non-Featured</li>)  : "";

race = <ul>
         {featured}
         {non_featured}
       </ul>