CODEWITHSUNDEEP
javascriptreactjslodashreact-redux
Supriya
Supriya

Reputation: 107

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

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

Upvotes: 0

Views: 67

Answers (3)

Mayank Shukla
Mayank Shukla

Reputation: 104379

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>

Upvotes: 0

phoa
phoa

Reputation: 261

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>
}

Upvotes: 0

yadhu
yadhu

Reputation: 15632

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;

Upvotes: 1

Related Questions