React: Passing a graphql prop to another component-CodePudding

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 >
          <div >
            <div >
              <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  role="group">
                          <button
                            
                            type="button"
                            style={{
                              backgroundColor: "#ff9900",
                              border: 0,
                            }}
                          >
                            Shadow
                          </button>
                          <button
                            
                            type="button"
                            style={{
                              backgroundColor: "#ffac2f",
                              border: 0,
                            }}
                          >
                            Reverse Shadow
                          </button>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                ))}
              </table>
            </div>
          </div>
        </section>
      </div>
    );
  }
}
export default Opportunity;

CodePudding user response：

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;