If/else statement inside loop inside return statement?

Question

Is it possible to do a conditional within a loop? I would like to print my array of objects, (ex: orders = [ {id: 000, delivery_date: 1/10/2019, cupcakes: [vanilla, chocolate, strawberry]}, ... ]) but I only want to print those that are in the backend database (running on a separate server) and were recently submitted (date >= orders.delivery_date)

Is there a way to do this?

renderTableData(orders) {
          const date = new Date(); 
          return (
              <tbody>
                {orders && orders.filter(order => date => new Date(order.delivery_date)).map(item =>
                    //CONDITIONAL HERE? 
                        <tr key={item.id}>
                          <td>{new Date(item.delivery_date).toLocaleDateString()}</td>
                          <td>
                            {item.cupcakes.map((subitem =>
                                <ul>
                                <li>{subitem.base}</li>
                                <li>{subitem.frosting}</li>
                                <li>{subitem.toppings}</li>
                                </ul>
                            ))}
                          </td>
                        </tr>

                )}
              </tbody>
          );
        }

Answer 1

Using (condtion)?"true":"false" operator

Please try this

 renderTableData(orders) {
              const date = new Date(); 
              return (
                  <tbody>
                    {orders && orders.map(item =>(
                            date >= item.delivery_date ? 
                            <tr key={item.id}>
                              <td>{new Date(item.delivery_date).toLocaleDateString()}</td>
                              <td>
                                {item.cupcakes.map((subitem =>
                                    <ul>
                                    <li>{subitem.base}</li>
                                    <li>{subitem.frosting}</li>
                                    <li>{subitem.toppings}</li>
                                    </ul>
                                ))}
                              </td>
                            </tr>
                          : ""
                    )) }
                  </tbody>
              );
            }

Answer 2

why don't you use a ternary operator? inside the return itself

{ Condition ? 
   {true}
   :
   {false}
  }

Answer 3

You can directly add the condition with && without using conditional statement. So single && and conditional both statements are valid whatever preferred to you.

renderTableData(orders) {
        const date = new Date(); 
            <tbody>
              {orders && orders.map(item => (
                date >= item.delivery_date &&
                <tr key={item.id}>
                  <td>{new Date(item.delivery_date).toLocaleDateString()}</td>
                  <td>
                    {item.cupcakes.map((subitem =>
                      <ul>
                        <li>{subitem.base}</li>
                        <li>{subitem.frosting}</li>
                        <li>{subitem.toppings}</li>
                      </ul>
                    ))}
                  </td>
                </tr>
              ))}
            </tbody>
         );
       }