React ternary operator with array.map return

Question

In my react render function, I am using array.map to return some JSX code in an array and then rendering it. This doesn't seem to work, I read a few questions here that suggested using return statement inside if/else block but that won't work in my case. I want to check whether round and duration are set on each array element and only then pass it in the JSX code.Could someone tell me a different approach please.

render() {
 var interviewProcessMapped = interviewProcess.map((item, index) => {

  return
    {item.round ?
        <div className="row title">
          <div className="__section--left"><span className="section-title">Round {index + 1}</span></div>
          <div className="__section--right">
            <h3>{item.round}</h3>
          </div>
        </div>
        : null
    }

    {
      item.durationHours > 0 || item.durationMinutes > 0 ?
        <div className="row">
          <div className="__section--left">Duration</div>
          <div className="__section--right border">
            {item.durationHours > 0 ? <span>{item.durationHours} Hours</span> : null} {item.durationMinutes > 0 ? <span>{item.durationMinutes} Minutes</span> : null}
          </div>
        </div>
        : null
    }
  });

 return <div>{interviewProcessMapped}</div>
}

add a , between the two objects? Like, instead of return { } { }, try return ( { } , { } ) — Jeremy Thille
– Jeremy Thille, Commented Aug 18, 2017 at 9:12
Your function has a) a line break after the return b) two return statements c) braces in plain JS expression where they don't belong (unlike in JSX literals where they are necessary) — Bergi
– Bergi, Commented Aug 18, 2017 at 9:17

Mayank Shukla · Accepted Answer · 2017-08-18 09:32:46Z

5

{ not required here:

return {item.round ?

If you use it that means you are returning an object.

Another issue is alone return means return; (automatic semicolon insertion) so either put the condition in same line or use ().

Write it like this:

render() {
    let a, b;
    var interviewProcessMapped = interviewProcess.map((item, index) => {
        a = item.round ?
                <div className="row title">
                    ....
                </div>
            : null;

        b =  (item.durationHours > 0 || item.durationMinutes > 0) ?
                  <div className="row">
                      ....
                  </div>
              : null;

        if(!a || !b)
            return a || b;
        return [a, b];
    });

    return (....)
}

edited Aug 18, 2017 at 9:32

answered Aug 18, 2017 at 9:15

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

2 Comments

Manav Saxena Over a year ago

this would only return the div for item.round if it exists, I want all the divs to be returned if the corresponding data is provided in the array being mapped

Mayank Shukla Over a year ago

@ManavSaxena check the updated answer, sorry missed that part :)

Marco Magrini · Accepted Answer · 2017-08-18 09:21:36Z

0

You should probably use a combination of Array.prototype.map() and Array.prototype.filter()

No need for if at all

Here the pseudo code:

interviewProcess.filter(() => {
    // return only if round and duration set
}).map(() => {
    // transform the filtered list
});

edited Aug 18, 2017 at 9:21

answered Aug 18, 2017 at 9:16

Marco Magrini

7491 gold badge9 silver badges19 bronze badges

Collectives™ on Stack Overflow

React ternary operator with array.map return

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related