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 (     <div>       <div className="box">         {this.props.collection.ids           .filter(             id =>               // 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 =>             {if (this.props.schema.collectionName.length < 0 ? (                <Expandable>                 <ObjectDisplay                   key={id}                   parentDocumentId={id}                   schema={schema[this.props.schema.collectionName]}                   value={this.props.collection.documents[id]}                 />               </Expandable>              ) : (               <h1>hejsan</h1>             )}           )}       </div>     </div>   ) } 

But it doesn't work..! Here's the error:

I appreciate all the help I can get!

Answer 1

You are using both ternary operator and if condition, use any one.

By ternary operator:

.map(id => {     return this.props.schema.collectionName.length < 0 ?         <Expandable>             <ObjectDisplay                 key={id}                 parentDocumentId={id}                 schema={schema[this.props.schema.collectionName]}                 value={this.props.collection.documents[id]}             />         </Expandable>     :         <h1>hejsan</h1> } 

By if condition:

.map(id => {     if(this.props.schema.collectionName.length < 0)         return <Expandable>                   <ObjectDisplay                       key={id}                       parentDocumentId={id}                       schema={schema[this.props.schema.collectionName]}                       value={this.props.collection.documents[id]}                   />               </Expandable>     return <h1>hejsan</h1> } 

Answer 2

There are two syntax errors in your ternary conditional:

1. remove the keyword if. Check the correct syntax here.

2. You are missing a parenthesis in your code. If you format it like this:

   {(this.props.schema.collectionName.length < 0 ?     (<Expandable></Expandable>)     : (<h1>hejsan</h1>)  )} 

Hope this works!