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!

The error is a syntax one and is based on the fact that you are trying to use a ternary operator and an if statement incorrectly. — Pineda
– Pineda, Commented Jul 7, 2017 at 11:44

Mayank Shukla · Accepted Answer · 2017-07-07 11:44:28Z

161

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

answered Jul 7, 2017 at 11:44

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Martin Nordström Over a year ago

Thanks man! I did notice that I used both :// Which one is preferred?

Huy Le Over a year ago

It is case by case but the fundamental difference is that if-else clause is a construct, ternary is an expression. And in JSX, only an expression can be placed directly under the JS block {}.

Mayank Shukla Over a year ago

i think primarily opinion based, but what i prefer is: if you want to check only one condition then use ternary operator otherwise use if/else ladder for multiple conditions :)

Martin Nordström Over a year ago

Alright! But how does it now what's true and what's isn't? When using if condition I'm not using any ? nor :.

Mayank Shukla Over a year ago

@MartinNordström sorry didn't get the last one, can you explain more?

Wachaga Mwaura · Accepted Answer · 2020-10-30 00:20:34Z

39

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>

answered Oct 30, 2020 at 0:20

Wachaga Mwaura

3,6503 gold badges31 silver badges33 bronze badges

2 Comments

Wachaga Mwaura Over a year ago

Did you solve the error you encountered @johnk?

john k Over a year ago

yup, it was bad data

dhaliman · Accepted Answer · 2017-07-07 12:01:07Z

13

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!

answered Jul 7, 2017 at 12:01

dhaliman

1,6291 gold badge13 silver badges24 bronze badges

Comments

Harshal Wani · Accepted Answer · 2018-12-05 07:04:27Z

8

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

answered Dec 5, 2018 at 7:04

Harshal Wani

2,3492 gold badges27 silver badges44 bronze badges

Comments

Huy Le · Accepted Answer · 2017-07-07 15:05:12Z

6

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

Also ? : is called ternary operator.

edited Jul 7, 2017 at 15:05

answered Jul 7, 2017 at 11:43

Huy Le

6675 silver badges18 bronze badges

2 Comments

Chris Over a year ago

One can have if inside a function. Even if a ternary also works, you shouldn't suggest to remove something that's technically perfectly valid.

Pineda Over a year ago

@Chris: that's a fair comment but the OP's error is based on a syntax error created by trying to combine both an if statement and the ternary operator incorrectly...

Nesha Zoric · Accepted Answer · 2018-02-21 10:50:08Z

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.

l2aelba · Accepted Answer · 2022-09-14 11:16:20Z

2

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

edited Sep 14, 2022 at 11:16

answered Sep 14, 2022 at 11:10

l2aelba

22.3k23 gold badges108 silver badges145 bronze badges

Comments

Adam Erickson · Accepted Answer · 2022-06-02 00:20:23Z

-1

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.

answered Jun 2, 2022 at 0:20

Adam Erickson

6,4532 gold badges48 silver badges37 bronze badges

Collectives™ on Stack Overflow

If condition inside of map() React

8 Answers 8

5 Comments

2 Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

5 Comments

2 Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related