0
528
ViewsIf condition inside of map() React
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!
3 answers
Answer question0
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>
}
0
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 < 0 ? (<Expandable></Expandable>) : (<h1>hejsan</h1>) )}
Hope this works!
0
If you're a minimalist like me. Say you only want to render a record with a list containing entries.
<div>
{data.map((record) => (
record.list.length > 0
? (<YourRenderComponent record={record} key={record.id} />)
: null
))}
</div>