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.

Answer 1

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

Answer 2

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