score:1

Accepted answer
import React, { useEffect, useState } from "react";
import "./styles.css";

function UserContainer(props) {
  const [cardHolders, setCardHolders] = useState([]);

  useEffect(() => {
    props.fetchedData.forEach((user) => {
      try {
        const uuid = user.Guid;
        console.log("uuid", uuid);
        Promise.resolve({
          data: { Rsp: { Result: { Credentials: "testcreds" } } }
        }).then((response) => {
          const cardHolderCredentials = response.data.Rsp.Result.Credentials;
          console.log(cardHolderCredentials); // Verify
          Promise.resolve({
            data: {
              Rsp: {
                Result: {
                  Cardholder: { Name: "Test Name" },
                  Format: {
                    BitLength: 1,
                    CardId: "CardId1",
                    Facility: "My Facility"
                  }
                }
              }
            }
          }).then((response) => {
            const userName = response.data.Rsp.Result.Cardholder.Name;
            const bitLength = response.data.Rsp.Result.Format.BitLength;
            const facilityCode = response.data.Rsp.Result.Format.Facility;
            const cardNumber = response.data.Rsp.Result.Format.CardId;

            setCardHolders((prev) => [
              ...prev,
              {
                username: userName,
                bitLength: bitLength,
                facilityCode: facilityCode,
                cardNumber: cardNumber
              }
            ]);
          });
        });
      } catch (err) {
        console.log(err);
      }
    });
  }, [props.fetchedData]);

  // console.log(cardHolders)
  const renderCardHolders = () => {
    return cardHolders.map((cardHolder, index) => {
      console.log(cardHolder);
      return (
        <tr key={index}>
          <th>{cardHolder.username}</th>
          <td>{cardHolder.bitLength}</td>
          <td>{cardHolder.facilityCode}</td>
          <td>{cardHolder.cardNumber}</td>
        </tr>
      );
    });
  };

  return (
    <table className="table">
      <thead>
        <tr>
          <th>
            <abbr title="Position">Cardholder name</abbr>
          </th>
          <th>Wiegand Bit type</th>
          <th>
            <abbr title="Played">Facility Code</abbr>
          </th>
          <th>
            <abbr title="Won">Card number</abbr>
          </th>
        </tr>
      </thead>
      <tbody>{renderCardHolders()}</tbody>
    </table>
  );
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <UserContainer fetchedData={[{ Guid: "1" }, { Guid: "2" }]} />
    </div>
  );
}

Related Query

More Query from same tag