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

So you just want to loop through an array and create/output some html for each element? Then check this question stackoverflow.com/questions/22876978/loop-inside-react-jsx?rq=1 — Olli
– Olli, Commented Aug 4, 2021 at 12:32

drodil · Accepted Answer · 2021-08-05 07:26:56Z

2

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

edited Aug 5, 2021 at 7:26

answered Aug 4, 2021 at 12:38

drodil

2,3311 gold badge23 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gwydion93 Over a year ago

This is not quite working. You can only have a single export default function. I tried moving MeetingEntry inside of MeetingCard as regular function but it says data.map Cannot read property 'map' of undefined'.

drodil Over a year ago

Well yes, you have to create a new file for the MeetingEntry component

Neel Dsouza · Accepted Answer · 2021-08-04 14:05:43Z

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

edited Aug 4, 2021 at 14:05

answered Aug 4, 2021 at 12:36

Neel Dsouza

1,5695 gold badges16 silver badges36 bronze badges

9 Comments

gwydion93 Over a year ago

I'm getting a meetinArray is not defined error when I plug this in. What am I doing wrong here?

Neel Dsouza Over a year ago

meetinArray should be the array that you pasted in your question.

gwydion93 Over a year ago

Not sure I understand. The array meetingData is what gets passed into the component and is what needs to be mapped. I edited my original question to show this.

Neel Dsouza Over a year ago

Ok. Got it. I've updated my answer. Plz check.

Neel Dsouza Over a year ago

So while sending it from parent, Try to send the exact data that you want like data.data

|

Collectives™ on Stack Overflow

Creating dynamic html in React

2 Answers 2

2 Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related