Issue
I am working on a React component that based on some information will send an email. I created another component for that email so I can pass the data and then it will display the data in a proper format. The format includes two tables, one that is fixed and the other that is dynamic. At the moment, the dynamic table the data that I pass to it is displaying everything on the same row. I would like to have it displayed on different rows.
This is how the data is sent to the function:
{
"partnerPriority": [
" A",
" B"
],
"partnerTournament": [
" Copa libertadores",
" Copa "
],
"partnerEvent": [
" Cali vs America",
" Copa libertadores"
],
"partnerDate": [
" 12/12/12",
" 11/11/22"
],
"partnerCountries": [
" CO,BR,EC",
" CO"
],
"partnerChannels": [
" ESPN,FOX",
" FOX"
]
}
This is the function:
export const EmailHtePartner = (data) => {
try {
return `
<html>
<head>
<style>
* {
font-family: Helvetica, Arial, sans-serif;
}
h1,
h2,
h4,
h3,
h5 {
color: white;
}
h4 {
margin: auto;
}
th {
font-weight: 600;
margin: 6;
padding: 8;
}
td {
color: white;
margin: 6;
padding: 8;
font-weight: 100;
}
table {
text-align: center;
border-collapse: collapse;
}
table,
td,
th {
border: 0.1rem solid #ffffff;
}
.wrapper {
display: table;
width: 100%;
height: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.email-content {
display: inline-block;
text-align: left;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="email-content">
<div
style="
background-color: #050914;
border-radius: 10px;
padding: 1.5rem;
width: 700px;
height: fit-content;
margin: 3rem;
"
>
<h2 style="font-weight: bold; text-align: center">
TEXT
</h2>
<h3 style="margin: 2; font-weight: bold; text-align: center">
Events:
</h3>
<table>
<tr>
<th
style="
background-color: #fd8204;
color: #050914;
font-weight: 600;
"
>
Category
</th>
<th style="background-color: #fd8204; color: #050914">
Tournament
</th>
<th style="background-color: #fd8204; color: #050914">Event</th>
<th style="background-color: #fd8204; color: #050914">Date</th>
<th style="background-color: #fd8204; color: #050914">
Countries
</th>
<th style="background-color: #fd8204; color: #050914">
Channels
</th>
</tr>
${data.map((item, index) => `
<tr key=${index}>
<td>${item.partnerPriority}</td>
<td>${item.partnerTournament}</td>
<td>${item.partnerEvent}</td>
<td>${item.partnerDate}</td>
<td>${item.partnerCountries}</td>
<td>${item.partnerChannels}</td>
</tr>
`)}
</table>
<h3 style="margin: 2; font-weight: bold; text-align: center">
Notes:
</h3>
<table>
<tr>
<th style="background-color: #fd8204; color: black">
Partners
</th>
<th style="background-color: #fd8204; color: #050914">DMCR</th>
<th style="background-color: #fd8204; color: #050914">
Thresholds
</th>
</tr>
<tr>
<td
style="
text-align: justify;
font-weight: 100;
width: 33.3%;
padding: 1rem;
"
>
TEXT
</td>
<td
style="
text-align: justify;
font-weight: 100;
width: 33.3%;
padding: 1rem;
"
>
TEXT
</td>
<td
style="
text-align: justify;
font-weight: 100;
width: 33.3%;
padding: 1rem;
"
>
TEXT
</td>
</tr>
</table>
<div
style="display: flex; justify-content: left; padding-top: 10px"
>
<h5 style="margin: 2; font-weight: 100">
TEXT
</h5>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
`;
} catch (error) {
console.log(error);
}
}
When testing I see everything on the same row, however I would like the data to be on a different row such this:
Category,tournament,event,Date,Countries,Channels
A,Copa libertadores, Cali vs America,12/12/12,CO,BR,EC,ESPN -> first row.
B,Copa, Copa libertadores, 11/11-22,CO,FOX -> second row.
If there were to be more data then as many rows as needed should be added.
Solution
I assume you will be getting the same length of values for every key of the data object. Ideally, it should be like that because if it is table data, then the length of the values of every key inside the data object should be the same.
Solution:
{
data['partnerPriority'].map((value, index) => <tr key={index}>
<td>{data['partnerPriority'][index]}</td>
<td>{data['partnerTournament'][index]}</td>
<td>{data['partnerEvent'][index]}</td>
<td>{data['partnerDate'][index]}</td>
<td>{data['partnerCountries'][index]}</td>
<td>{data['partnerChannels'][index]}</td>
</tr>
)}
Here is the DEMO.
Answered By - collab-with-tushar-raj
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.