If 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:

Screenshot

I appreciate all the help I can get!

249057 次浏览
小开

Remove the if keyword. It should just be predicate ? true_result : false_result.

Also ? : is called ternary operator.

小开
最佳答案

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

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!

小开

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) => {
// just standard if statement
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>
);
}

Then just call it when mapping:

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(this.renderItem)
}
</div>
</div>
)
}

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.

小开

This one I found simple solutions:

row = myArray.map((cell, i) => {


if (i == myArray.length - 1) {
return <div> Test Data 1</div>;
}
return <div> Test Data 2</div>;
});
小开

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>
小开

That the ternary operator works but not if-else statements is rather ridiculous and makes complex logic a pain. The former seems to be the only solution though.

小开

Just in case:

If only: (Use && without ? : or else)

When you don't have to return anything when else

Examples: (Array or Object)

// const someArray = ['a', 'b', 'c']
{someArray.map(
(v) =>
someCondition && (
<></> // {v}
)
)}


// const someObject = {a: '1', b: '2', c: '3'}
{Object.keys(someObject).map(
(k) =>
someCondition && (
<></> // {someObject[k]} (Remember: add key={k} in wrapper)
)
)}

提交答案