Add a conditional in the reactjs rendering

Question

I have a component that returns me a data that I want to display.

However I would like to add a conditional that would allow me to display my table only if it contains data.

We must use the if and else conditional for the display of the table.

Is there another solution to not display the map when it is empty?

import React from 'react';
import {Card, Col, Row } from 'react-bootstrap';

function Int(props: any) {
    let calendarPlanned: any[] = props.calendarPlannedData;

    return (
    <Card>
        <Card.Body>
           {calendarPlanned.map((planned) => (
                <Col xs={12} lg={12} className="no-gutters" key={planned.id}>
                    <Row>
                        <Col
                            xs={3}
                            lg={3}
                            className="no-gutters"                             
                        >
                            {planned.plannedDate}
                        </Col>
                        <Col
                            xs={2}
                            lg={2}
                            className="d-flex"
                        >
                        </Col>
                        <Col
                            xs={7}
                            lg={7}
                            className="d-flex"
                        >
                            <strong
                                className="d-block text-truncate"          
                            >
                               {planned.stepName}
                            </strong>
                        </Col>
                    </Row>
                </Col>
            ))}
        </Card.Body>
    </Card>
   );
}

export default Int;

Kavindu Vindika · Accepted Answer · 2021-09-06 15:19:18Z

Use conditional rendering by checking array.length > 0 to render the table as follows.

import React from "react";
import { Card, Col, Row } from "react-bootstrap";

function Int(props: any) {
  let calendarPlanned: any[] = props.calendarPlannedData;

  return (
    <Card>
      <Card.Body>
        {calendarPlanned.length > 0 &&
          calendarPlanned.map((planned) => (
            <Col xs={12} lg={12} className="no-gutters" key={planned.id}>
              <Row>
                <Col xs={3} lg={3} className="no-gutters">
                  {planned.plannedDate}
                </Col>
                <Col xs={2} lg={2} className="d-flex"></Col>
                <Col xs={7} lg={7} className="d-flex">
                  <strong className="d-block text-truncate">
                    {planned.stepName}
                  </strong>
                </Col>
              </Row>
            </Col>
          ))}
      </Card.Body>
    </Card>
  );
}

export default Int;

sairaj · Accepted Answer · 2021-09-06 15:22:26Z

0

Check if data exists and if exists it it's length is greater than 0 then render your stuff else just render nothing

 {calenderPlanned && calendarPlanned.length > 0 ? calendarPlanned.map((planned) => (....) : null}

edited Sep 6, 2021 at 15:22

answered Sep 6, 2021 at 15:19

sairaj

4135 silver badges13 bronze badges

1 Comment

Giovanni Esposito Over a year ago

Make the last update explaining what you have done. Code-only answers are usually downvoted. Just a suggestion =)

Giovanni Esposito · Accepted Answer · 2021-09-06 15:24:42Z

0

You could use length property or just check if calenderPlanned has at least one element:

{calendarPlanned.length > 0 && calendarPlanned.map((planned) => (....))}

Or

{calendarPlanned[0] && calendarPlanned.map((planned) => (....))}

Of course this is valid if and even if calendarPlanned is already defined. If props.calendarPlannedData could be undefined, you should modify your condition in this way:

{calendarPlanned && calendarPlanned.length > 0 && calendarPlanned.map((planned) => (....))}

Or

{calendarPlanned && calendarPlanned[0] && calendarPlanned.map((planned) => (....))}

answered Sep 6, 2021 at 15:24

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

Collectives™ on Stack Overflow

Add a conditional in the reactjs rendering

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related