Reactjs condition inside map function

Question

I've looked at a bunch of questions here and read the docs over and over, however this just doesn't seem to want to work no matter what I do.

This is supposed to return one thing if X is true and return something else if it's not. It's inside a map function because I need this to be done for multiple things at once.

    function ContentProcessing(props) {

        return (
            <div>
                props.content.map(content => {
                        {content.type === "card" ? (
                            <Card title={content.title} />
                        ) : (
                            <Content title={content.title} paragraph={content.guideline} />
                        )}
                })
            </div>
        );
    }

both <Card /> and <Content /> return one string

However I get the error
./src/App.js
Syntax error: /src/App.js: Unexpected token, expected , (79:13)

  77 |      <div>
  78 |          props.content.map(content => {
> 79 |                  {content.type === "card" ? (
     |                          ^
  80 |                      <Card title={content.title} />
  81 |                  ) ? (
  82 |                      <Content title={content.title} paragraph={content.guideline} />

I don't get why this isn't working.

You've got an extra open bracket.

jmargolisvt
– jmargolisvt

2018-03-20 15:42:53 +00:00
Commented Mar 20, 2018 at 15:42 — jmargolisvt
– jmargolisvt, Commented Mar 20, 2018 at 15:42
Possible duplicate of ternary operator inside map

Liam
– Liam

2018-03-20 15:58:23 +00:00
Commented Mar 20, 2018 at 15:58 — Liam
– Liam, Commented Mar 20, 2018 at 15:58

Mayank Shukla · Accepted Answer · 2018-03-20 15:54:59Z

6

Issues:

1- Use {} to put expressions inside jsx (to put map inside div).

2- you are using {} means block body of arrow function, so you need to use return inside the function body, otherwise by default map returns undefined.

3- You are using {} twice, so 2nd {} will be treated as object and content.type will be treated as key and that key is not valid, thats why you are getting error.

4- Forgot to define the key on elements.

Use this:

return (
    <div>
        {
            props.content.map(content => content.type === "card" ? (
                    <Card title={content.title} />
                ) : (
                    <Content title={content.title} paragraph={content.guideline} />
                )
        )}
    </div>
);

edited Mar 20, 2018 at 15:54

answered Mar 20, 2018 at 15:42

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

4 Comments

lpetrucci Over a year ago

This doesn't give me an error, however nothing is being printed on the page

Mayank Shukla Over a year ago

have you put same snippet inside function ContentProcessing(props) {....}, because it should work.

lpetrucci Over a year ago

I have, now it's just giving me an error on the parenthesis that closes the map function

lpetrucci Over a year ago

Nevermind, your answer is right, you just forgot to correct my mistake of using ? instead of : between statements. Thank you!

Rodius · Accepted Answer · 2018-03-20 15:53:47Z

A couple of things are wrong I believe. You didn't add the curly braces in the first div. Inside the map you added two times the curly braces so you either remove one or add a return statement. You also added to "?" (the second one should be ":").

This should work:

function ContentProcessing(props) {
      return (
        <div>
          {props.content.map(content =>
            content.type === "card" ? <Card title={content.title} /> : <Content title={content.title} paragraph={content.guideline} /> 
          )}
        </div>
      );
    }

You can also add if else statements inside the map if you add braces:

function ContentProcessing(props) {
        return (
          <div>
            {props.content.map((content) => {
              if (content.type === "card") {
                return (<Card title={content.title} />);
              }
              return (<Content title={content.title} paragraph={content.guideline} />);
            })}
          </div>
        );
      }

jaredkwright · Accepted Answer · 2018-03-20 15:44:35Z

1

Your syntax for the ternary operator is wrong. You have condition ? a ? b. The correct syntax is condition ? a : b.

Try

function ContentProcessing(props) {
        return (
            <div>
                {props.content.map(content => 
                        content.type === "card" ? (<Card title={content.title} />) : 
(<Content title={content.title} paragraph={content.guideline} />)
                )}
            </div>
        );
    }

edited Mar 20, 2018 at 15:44

answered Mar 20, 2018 at 15:43

jaredkwright

1,3902 gold badges11 silver badges28 bronze badges

3 Comments

lpetrucci Over a year ago

This was a mistake, however the error I receive is still the same

jaredkwright Over a year ago

Sorry your formatting was confusing without syntax highlighting. Try my latest edit

jaredkwright Over a year ago

The error you were receiving is likely because you didn't escape the Javascript inside curly braces. You had the result of the map escaped within curly braces, but not the call itself. The entire JS block has to be within curly braces.

illiteratewriter · Accepted Answer · 2018-03-20 15:49:19Z

0

Multiple issues with the code.

return (
        <div>
            {props.content.map(content => 
                    content.type === "card" ? (
                        <Card title={content.title} />
                    ) : (
                        <Content title={content.title} paragraph={content.guideline} />
                    )
            )}
        </div>
    );

Extra brackets removed.

Conditional operator syntax was wrong.expression ? expression : expression

edited Mar 20, 2018 at 15:49

answered Mar 20, 2018 at 15:46

illiteratewriter

4,3532 gold badges26 silver badges46 bronze badges

2 Comments

lpetrucci Over a year ago

This just tells me content is undefined

illiteratewriter Over a year ago

sorry i missed a bracket.

Collectives™ on Stack Overflow

Reactjs condition inside map function

4 Answers 4

4 Comments

Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related