CODEWITHSUNDEEP
arraysreactjsreact-functional-component
gwydion93
gwydion93

Reputation: 1923

Creating dynamic html in React

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"
    }
]

Upvotes: 1

Views: 3021

Answers (2)

drodil
drodil

Reputation: 2326

Just loop your data and add each entry as their own. Also good idea to create own component for the meeting entries so that it's easier to customize it if necessary.

MeetingEntry:

import React from 'react';

export default function MeetingEntry({ meetingData }) {
    return (
          <p style={{ marginLeft: "50px" }}>Meeting location: {meetingData.meeting_location}, Meeting Date: {meetingData.meeting_date}</p>
    )
}

MeetingsCard:

import React from 'react';
import MeetingEntry from './MeetingEntry';

export default function MeetingsCard({ data }) {
    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>
                    {data.map((el, idx) => (
                          <MeetingEntry notification={el} key={idx} />
                    ))}
                    <hr style={{ color: "grey" }} />
                </div>
            </div>
        </div>
    )
}

Upvotes: 2

Neel Dsouza
Neel Dsouza

Reputation: 1539

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>
    )
}

Upvotes: 1

Related Questions