How To Conditional Render Data From 2 Data Sources Using React

user_14438960 0
Viewed 297

I am rendering data from two JSON files in react. First file is my main file and from the second file I want conditional rendering on the basis of the first file. Explanation: From First file name "maindata.json" I am rendering all the data into a table. There is a Unique id field in the Json in first file. From Second file I just want to populate only a date fieldand there is also a unique id in the second JSON. What I want is if the main JSon file id matches with the id in the second json file, so print the date from the second file in the same row next to the id from the main file. What I have done.

  • I have applied the condition but the problem is its not doing the match and prints all the dates in one column.
  • React App is getting slower ( performance Issue )

Here is my Code sample.

    import React, { Component } from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import ReactHTMLTableToExcel from 'react-html-table-to-excel';
import data from "./data/maindata.json";
import data1 from "./data/data2.json";

class PenApprovals extends Component {

  render() {

    return (
      <div className="container-fluid" style={{ backgroundColor: '#f7f7f7' }}>
        <table id="table-to-xls" className="table table-responsive table-striped display nowrap"  >
          <thead>
            <tr>
              <th scope="col">Id</th>
              <th scope="col">Date</th>
              <th scope="col">Status</th>
              <th scope="col">Name</th>
            </tr>
          </thead>
          <tbody>
            {data.map((record) => (
              <tr>
                <td>{record.UniqueName}</td>
                <td>
                  {data1.map((item) =>
                    <React.Fragment>
                     //Here fetching date from second file
                      {item.uniqueName === <span>{record.UniqueName}</span> ? <span> 
                      {item.assignedDate}</span> : "NO Match Found" }
                    </React.Fragment>
                  )}
                </td>
                <td>{record.Status }</td>
                <td>{record.Name}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}
export default PenApprovals;

here is JSON Sample.

Main Data File

[
    {
        "UniqueName": "CR30876",
        "StatusString": "Submitted",
        "Name": "Pegasus Test 1"
    },
    {
        "UniqueName": "CR35876",
        "StatusString": "Submitted",
        "Name": "Pegasus Test 1"
    }
]

Second Conditional JSON File sample

[
    {
        "uniqueName": "CR35876",
        "assignedDate": "2020-11-09",
    },
    {
        "uniqueName": "CR34523",
        "assignedDate": "2020-11-09",
    }
  //More records....
]

Thanks Everyone.

jsx reactjs
1 Answers

You should use filter instead of map! Here's the code that works.

class PenApprovals extends Component {
  render() {
    return (
      <div className="container-fluid" style={{ backgroundColor: "#f7f7f7" }}>
        <table
          id="table-to-xls"
          className="table table-responsive table-striped display nowrap"
        >
          <thead>
            <tr>
              <th scope="col">Id</th>
              <th scope="col">Date</th>
              <th scope="col">Status</th>
              <th scope="col">Name</th>
            </tr>
          </thead>
          <tbody>
            {data.map((record) => {
              const tgt = data1.filter(
                (item) => item.uniqueName === record.UniqueName
              );
              return (
                <tr>
                  <td>{record.UniqueName}</td>
                  <td>
                    {tgt.length
                      ? tgt.map((item) => (
                          <React.Fragment key={item.uniqueName}>
                            <span>{item.assignedDate}</span>
                          </React.Fragment>
                        ))
                      : "NO Match Found"}
                  </td>
                  <td>{record.StatusString}</td>
                  <td>{record.Name}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }
}
export default PenApprovals;
user_138904230
Related