React: Passing a graphql prop to another component

Question

I have a dashboard with a table component inside it. I am making a graphql call in the dashboard and need to pass the data recieved into the table like this. However I can't get the data to show up inside the table component.

Here is my approach. Please let me know what I'm missing

Dashboard.js

import React from "react";
import "bootstrap/js/src/collapse.js";
import DashboardTable from "../DashboardTable";
import { API } from "@aws-amplify/api";
import config from "../../aws-exports";
import * as queries from "../../graphql/queries";

export default function Dashboard() {
  var opportunityTable;

  API.configure(config);
  async function asyncCall() {
    const opportunityTable = await API.graphql({
      query: queries.listMockOppsTables,
    });
    // console.log(opportunityTable.data.listMockOppsTables); // result: { "data": { "listTodos": { "items": [/* ..... */] } } }
  }

  asyncCall();

  return (
    <div>
      <div className="container py-5">
        <DashboardTable
          data={opportunityTable.data.listMockOppsTables}
        ></DashboardTable>
      </div>
    </div>
  );
}

Table (receiving prop data)

import React from "react";
import "bootstrap/js/src/collapse.js";
require("../opportunityData.json");

export class Opportunity extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
      opportunityData: this.props.items,
    };
  }
  render() {
     console.log(this.opportunityData);// returns nothing

    return (
      <div>
        <section class="py-5 mt-5">
          <div class="container py-5">
            <div class="table-responsive">
              <table class="table">
                <thead>
                  <tr>
                    <th>Shadow ID</th>
                    <th>Role Title</th>
                    <th>Interview Type</th>
                    <th>Level</th>
                    <th>Date and Time</th>
                    <th># Requests</th>
                    <th>Make Request</th>
                  </tr>
                </thead>
                {this.opportunityData.map((opportunity) => (
                  <tbody>
                    <tr>
                      <td>{opportunity.shadow_id}</td>
                      <td>{opportunity.job_title}</td>
                      <td>{opportunity.shadow_type}</td>
                      <td>4</td>
                      <td>
                        {opportunity.shadow_datetime}
                        <br />
                        {opportunity.shadow_datetime}
                      </td>
                      <td>2</td>
                      <td>
                        <div class="btn-group" role="group">
                          <button
                            class="btn btn-primary"
                            type="button"
                            style={{
                              backgroundColor: "#ff9900",
                              border: 0,
                            }}
                          >
                            Shadow
                          </button>
                          <button
                            class="btn btn-primary"
                            type="button"
                            style={{
                              backgroundColor: "#ffac2f",
                              border: 0,
                            }}
                          >
                            Reverse Shadow
                          </button>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                ))}
              </table>
            </div>
          </div>
        </section>
      </div>
    );
  }
}
export default Opportunity;

Answer 1

You're problem is either with your method of passing state or with you querying. One issue in your code is by practice in React, you want state to be managed as a stateful value with the useState() hook. You will have to verify your data is loaded before passing it into the hook. This would look like:

const [opportunityTable, changeOpportunityTable] = useState(asyncCall());

Also you should've posted your DashBoardTable component instead of your Oppurtunity component which you don't seem to import in DashBoard to begin with. Here's a little skeleton

const DashBoardTable = ({data}) => {
   //whatever code you may need
   return (
    //other formatting
     data.map((key) => {
         //access with data.<VARIABLE>
     }
);
} 

export default DashBoardTable;