If condition inside of map React

Question

I have a map  function that needs to display views based on a condition  I ve looked at the React documentation on how to write conditions and this is how you can write a condition    if  loggedIn           Hello             ByeBye       Here s the link  https   facebook github io react docs conditional-rendering html inline-if-else-with-conditional-operator   So  I tried to take that knowledge and implemant it in my React app  And it turned out like this   render       return        lt div gt         lt div className  box  gt           this props collection ids            filter              id   gt                   note  this is only passed when in top level of document               this props collection documents id                   this props schema foreignKey                     this props parentDocumentId                        map id   gt               if  this props schema collectionName length  lt  0                     lt Expandable gt                   lt ObjectDisplay                   key  id                    parentDocumentId  id                    schema  schema this props schema collectionName                     value  this props collection documents id                     gt                 lt  Expandable gt                                    lt h1 gt hejsan lt  h1 gt                                     lt  div gt       lt  div gt          But it doesn t work    Here s the error     I appreciate all the help I can get

User · Answer

If you re a minimalist like me  Say you only want to render a record with a list containing entries   lt div gt     data map  record    gt        record list length  gt  0           lt YourRenderComponent record  record  key  record id    gt           null        lt  div gt

User · Answer

You are using both ternary operator and if condition  use any one   By ternary operator    map id   gt        return this props schema collectionName length  lt  0            lt Expandable gt               lt ObjectDisplay                 key  id                  parentDocumentId  id                  schema  schema this props schema collectionName                   value  this props collection documents id                 gt           lt  Expandable gt                 lt h1 gt hejsan lt  h1 gt      By if condition    map id   gt        if this props schema collectionName length  lt  0          return  lt Expandable gt                     lt ObjectDisplay                       key  id                        parentDocumentId  id                        schema  schema this props schema collectionName                         value  this props collection documents id                       gt                 lt  Expandable gt      return  lt h1 gt hejsan lt  h1 gt

User · Answer

Remove the if keyword  It should just be predicate   true result   false result   Also     is called ternary operator

User · Answer

This one I found simple solutions   row   myArray map  cell  i    gt         if  i    myArray length - 1          return  lt div gt  Test Data 1 lt  div gt             return  lt div gt  Test Data 2 lt  div gt

User · Answer

You re mixing if statement with a ternary expression  that s why you re having a syntax error  It might be easier for you to understand what s going on if you extract mapping function outside of your render method   renderItem    id    gt           just standard if statement     if  this props schema collectionName length  lt  0            return                lt Expandable gt                   lt ObjectDisplay                     key  id                      parentDocumentId  id                      schema  schema this props schema collectionName                       value  this props collection documents id                     gt               lt  Expandable gt                       return            lt h1 gt hejsan lt  h1 gt             Then just call it when mapping   render         return            lt div gt               lt div className  box  gt                                         this props collection ids                          filter                              id   gt                                 note  this is only passed when in top level of document                             this props collection documents id                                   this props schema foreignKey                                   this props parentDocumentId                                                    map this renderItem                                 lt  div gt           lt  div gt            Of course  you could have used the ternary expression as well  it s a matter of preference  What you use  however  affects the readability  so make sure to check different ways and tips to properly do conditional rendering in react and react native

User · Answer

There are two syntax errors in your ternary conditional    remove the keyword if  Check the correct syntax here  You are missing a parenthesis in your code  If you format it like this     this props schema collectionName length  lt  0         lt Expandable gt  lt  Expandable gt           lt h1 gt hejsan lt  h1 gt          Hope this works

[reactjs] If condition inside of map() React

Examples related to reactjs