如何在单个表中迭代多个状态

Question

This is simple table which have sr no, campaign id, campaign name, campaign status iterate from campaign state, and i have reach, sent,delivered etc on Stats state. How to iterate campaigns and stats in a single tr to get all the required data in one table? campaigns and stats are two different states with data collected from different api.

<table className="table table-bordered table-hover">
    <thead>
    <tr>
        <th>Sr. No</th>
        <th>Campaign Id</th>
        <th>Campaign Name</th>
        <th>Campaign Status</th>
        <th>Reach</th>
        <th>Sent</th>
        <th>Delivered</th>
        <th>Views</th>
        <th>Clicks</th>
        <th>Unsubscribes</th>
    </tr>
    </thead>
    <tbody>
    {campaigns.map((campaigns, index) => (
        <tr>
            <td>
                {index + 1}
            </td>
            <td>
                {campaigns.campaignId}
            </td>
            <td>
                {campaigns.campaignTitle}
            </td>
            <td>
                {campaigns.campaignStatus}
            </td>
        </tr>
    ))}
    {stats.map((stats, index) => (
        <tr>
            <td>
                {stats.data.reach}
            </td>
            <td>
                {stats.data.sent}
            </td>
            <td>
                {stats.data.delivered}
            </td>
            <td>
                {stats.data.views}
            </td>
            <td>
                {stats.data.clicks}
            </td>
            <td>
                {stats.data.unsubscribed}
            </td>
        </tr>
    ))}
    </tbody>
</table>

Answer 1

I assume that both array have same size, you can create oneother from this and use it

render() {
    const joinedMap = [];
    for(let x = 0; x < elem.length; x++){
        joinedMap.push({
            ...campaigns[x],
            ...stats.data[x]
        });
    }
    return (

        <table className="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Sr. No</th>
                    <th>Campaign Id</th>
                    <th>Campaign Name</th>
                    <th>Campaign Status</th>
                    <th>Reach</th>
                    <th>Sent</th>
                    <th>Delivered</th>
                    <th>Views</th>
                    <th>Clicks</th>
                    <th>Unsubscribes</th>
                </tr>
            </thead>
            <tbody>
                {joinedMap.map((elem, index) => (
                    <tr>
                        <td>
                            {index + 1}
                        </td>
                        <td>
                            {elem.campaignId}
                        </td>
                        <td>
                            {elem.campaignTitle}
                        </td>
                        <td>
                            {elem.campaignStatus}
                        </td>
                        <td>
                            {elem.reach}
                        </td>
                        <td>
                            {elem.sent}
                        </td>
                        <td>
                            {elem.delivered}
                        </td>
                        <td>
                            {elem.views}
                        </td>
                        <td>
                            {elem.clicks}
                        </td>
                        <td>
                            {elem.unsubscribed}
                        </td>
                    </tr>
                ))}
            </tbody>
        </table>
    );
}

Answer 2

Why not merge the data in advance?

import React from "react";

const campaigns = [
  {campaignId: "Id1", campaignTitle: "Title1", campaignStatus: "Status1"},
  {campaignId: "Id2", campaignTitle: "Title2", campaignStatus: "Status2"},
  {campaignId: "Id3", campaignTitle: "Title3", campaignStatus: "Status3"}
];

const stats = [
  {data: {reach: "reach1", sent: "sent1", delivered: "delivered1"}},
  {data: {reach: "reach2", sent: "sent2", delivered: "delivered2"}},
  {data: {reach: "reach3", sent: "sent3", delivered: "delivered3"}}
];

const allData = campaigns.map((campaign, i) => ({
  ...campaign,
  ...stats[i].data
}));

export default function App() {
  return (
    <table className="table table-bordered table-hover">
      <thead>
        <tr>
          <th>Sr. No</th>
          <th>Campaign Id</th>
          <th>Campaign Name</th>
          <th>Campaign Status</th>
          <th>Reach</th>
          <th>Sent</th>
          <th>Delivered</th>
        </tr>
      </thead>
      <tbody>
        {allData.map(
          (
            {
              campaignId,
              campaignTitle,
              campaignStatus,
              reach,
              sent,
              delivered
            },
            index
          ) => (
            <tr key={index}>
              <td>{index + 1}</td>
              <td>{campaignId}</td>
              <td>{campaignTitle}</td>
              <td>{campaignStatus}</td>
              <td>{reach}</td>
              <td>{sent}</td>
              <td>{delivered}</td>
            </tr>
          )
        )}
      </tbody>
    </table>
  );
}