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 https://stackoverflow.com/questions/22876978/loop-inside-react-jsx?rq=1 — Olli, Aug 04 '21 at 12:32

drodil · Answer 1 · 2021-08-05T07:26:56.553

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

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'. — gwydion93, Aug 04 '21 at 13:45
Well yes, you have to create a new file for the MeetingEntry component — drodil, Aug 05 '21 at 07:26

Neel Dsouza · Accepted Answer · 2021-08-04T14:05:43.497

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 04 '21 at 14:05

answered Aug 04 '21 at 12:36

Neel Dsouza

1,342
4
15
33

I'm getting a `meetinArray is not defined error` when I plug this in. What am I doing wrong here? – gwydion93 Aug 04 '21 at 13:19
`meetinArray` should be the array that you pasted in your question. – Neel Dsouza Aug 04 '21 at 13:53
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. – gwydion93 Aug 04 '21 at 14:02
Ok. Got it. I've updated my answer. Plz check. – Neel Dsouza Aug 04 '21 at 14:06
OK, closer but I am now gettin `TypeError: meetingData.map is not a function` – gwydion93 Aug 04 '21 at 14:15
Tats Strange!! Can u please console `meetingData` and see whats in it. – Neel Dsouza Aug 04 '21 at 14:26
This is very weird. When I console.log it, the array is coming in with data. As I mentioned, the data itself is coming from a parent component. An `axios.get()` request is made inside of `componentDidMount` in the parent function and worked fine if I just add it directly to a single `
` tag.
– gwydion93 Aug 04 '21 at 15:54
1

So while sending it from parent, Try to send the exact data that you want like `data.data` – Neel Dsouza Aug 04 '21 at 16:11
Ha, I figured it out! The data was coming in as an object, not an array. I ad to go back to the axios request in the parent component and just add []s to make it an array like this [{meeting1}, {meeting2}, ... ] – gwydion93 Aug 04 '21 at 17:47

Creating dynamic html in React

2 Answers2