Add a conditional in the reactjs rendering - reactjs

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;

Answer 1

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;

Answer 2

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}

Answer 3

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) => (....))}