Creating dynamic html in React

Question

Suppose I have a component that takes in MeetingData as an object and populates a <p> element with specific items from that object:

import React from 'react';

export default function MeetingsCard({ meetingData }) {
    return (
        <div className="col-xl-1-12" style={{ margin: "10px", background: "#1A4565", border: "double" }}>
            <div className="card" style={{ border: "none", width: "100%" }}>
                <div className="card-body" style={{ width: "100%", background: "lightBlue" }}>
                    <h3 className="card-title" style={{ marginLeft: "10px" }}>Meetings</h3>
                    <p style={{ marginLeft: "50px" }}>Meeting location: {meetingData.meeting_location}, Meeting Date: {meetingData.meeting_date}</p>
                    <hr style={{ color: "grey" }} />
                </div>
            </div>
        </div>
    )
}

In this case, it expects there 2 be only a single item for meetingData.meeting_date and a single item for meetingData.meeting_location. But suppose the returned object has more than one and I need to populate multiple <p> elements? How would I do that if the meeting object/array looks like this:

meetingData =  [
    {
        "date_time": "2021-07-07",
        "meeting_location": "test-location1",
        "name": "John Doe"
    },
    {
        "date_time": "2021-07-08",
        "meeting_location": "test-location2",
        "name": "John Doe"
    }
]

Answer 1

You can just loop through the array and display data something like below

export default function MeetingsCard({ meetingData }) {
    return (
        <div className="col-xl-1-12" style={{ margin: "10px", background: "#1A4565", border: "double" }}>
            <div className="card" style={{ border: "none", width: "100%" }}>
                <div className="card-body" style={{ width: "100%", background: "lightBlue" }}>
                    <h3 className="card-title" style={{ marginLeft: "10px" }}>Meetings</h3>
{meetingData.map(meeting => (
                    <p style={{ marginLeft: "50px" }}>Meeting location: {meeting.meeting_location}, Meeting Date: {meeting.date_time}</p>))
                    <hr style={{ color: "grey" }} />
                </div>
            </div>
        </div>
    )
}