How to display state object elements in another component? - reactjs

Question

i'm trying to use a table from MaterialUI and populate it with financial data (using promise API). I have three components:
Gl.js
myTable
index.js
I want to use the state object in the Gl.js component and populate the table in myTable.js but not sure how to. Please ask for more details if necessary, I must complete this project.
GL.js
import React, { Component, createContext, Provider } from 'react';
import ReactDOM from 'react-dom';
import axios from "axios";
import CollapsibleTable from './myTable';
export const CTX = React.createContext();
class Gl extends React.Component {
_isMounted = false;
constructor(props) {
super(props)
this.state = {
applBs: []
}
}
getData() {
const axios = require("axios");
axios({
"method": "GET",
"url": "https://fmpcloud.p.rapidapi.com/balance-sheet-statement/AAPL",
"headers": {
"content-type": "application/octet-stream",
"x-rapidapi-host": "fmpcloud.p.rapidapi.com",
"x-rapidapi-key": "4560d76562msh36c4de0a03c6e54p1bf4a2jsne2d882693304",
"useQueryString": true
}, "params": {
"period": "annual",
"apikey": "demo"
}
})
.then(response => {
if (this._isMounted) {
this.setState({ applBs: response.data[0] })
}
})
.catch(error => {
console.log(error)
})
}
componentDidMount() {
this._isMounted = true;
this.getData();
}
componentWillUnamount() {
this._isMounted = false;
}
render() {
return (
<div>
<CollapsibleTable callData={this.state.applBs} />
<CTX.Provider value={ this.state.applBs }>
{this.props.children}
</CTX.Provider>
</div>
)
}
}
ReactDOM.render(<Gl />, document.getElementById("root"))
export default Gl
myTable.js
import React, { Component, Consumer } from 'react';
import ReactDOM from "react-dom"
import PropTypes from 'prop-types';
import { makeStyles } from '#material-ui/core/styles';
import Box from '#material-ui/core/Box';
import Collapse from '#material-ui/core/Collapse';
import IconButton from '#material-ui/core/IconButton';
import Table from '#material-ui/core/Table';
import TableBody from '#material-ui/core/TableBody';
import TableCell from '#material-ui/core/TableCell';
import TableContainer from '#material-ui/core/TableContainer';
import TableHead from '#material-ui/core/TableHead';
import TableRow from '#material-ui/core/TableRow';
import Typography from '#material-ui/core/Typography';
import Paper from '#material-ui/core/Paper';
import KeyboardArrowDownIcon from '#material-ui/icons/KeyboardArrowDown';
import KeyboardArrowUpIcon from '#material-ui/icons/KeyboardArrowUp';
import CTX from "./GL.js"
const useRowStyles = makeStyles({
root: {
'& > *': {
borderBottom: 'unset',
},
},
});
function createData(name, calories, fat, carbs, protein, price) {
return {
name,
calories,
fat,
carbs,
protein,
price,
history: [
{ lineItem: 'Pop', date: '2020-01-05', customerId: '11091700', amount: 3 },
{ lineItem: 'Pop', date: '2020-01-02', customerId: 'Anonymous', amount: 1 },
],
};
}
function Row(props) {
const { row } = props;
const [open, setOpen] = React.useState(false);
const classes = useRowStyles();
return (
<React.Fragment>
<TableRow className={classes.root}>
<TableCell>
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</TableCell>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box margin={1}>
<Typography variant="h6" gutterBottom component="div">
History
</Typography>
<Table size="small" aria-label="purchases">
<TableHead>
<TableRow>
<TableCell>
Line Item
</TableCell>
<TableCell>
Google
</TableCell>
<TableCell>
Customer
</TableCell>
<TableCell align="right">
Amount
</TableCell>
<TableCell align="right">
Total price ($)
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{row.history.map((historyRow) => (
<TableRow key={historyRow.date}>
<TableCell component="th" scope="row">
{historyRow.date}
</TableCell>
<TableCell>{historyRow.customerId}</TableCell>
<TableCell align="right">{historyRow.amount}</TableCell>
<TableCell align="right">
{Math.round(historyRow.amount * row.price * 100) / 100}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
Row.propTypes = {
row: PropTypes.shape({
calories: PropTypes.number.isRequired,
carbs: PropTypes.number.isRequired,
fat: PropTypes.number.isRequired,
history: PropTypes.arrayOf(
PropTypes.shape({
amount: PropTypes.number.isRequired,
customerId: PropTypes.string.isRequired,
date: PropTypes.string.isRequired,
}),
).isRequired,
name: PropTypes.string.isRequired,
price: PropTypes.number.isRequired,
protein: PropTypes.number.isRequired,
}).isRequired,
};
const rows = [
createData('Frozen yoghurt', 159, 6.0, 24, 4.0, 3.99),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3, 4.99),
createData('Eclair', 262, 16.0, 24, 6.0, 3.79),
createData('Cupcake', 305, 3.7, 67, 4.3, 2.5),
createData('Gingerbread', 356, 16.0, 49, 3.9, 1.5),
];
export default function CollapsibleTable() {
return (
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableHead>
<TableRow>
<TableCell />
<TableCell>
Apple.Inc
</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<Row key={row.name} row={row} />
))}
</TableBody>
</Table>
</TableContainer>
);
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Gl from './GL';
import CollapsibleTable from './myTable';
ReactDOM.render(
<React.StrictMode>
<Gl >
<CollapsibleTable />
</Gl>
</React.StrictMode>,
document.getElementById('root'));

Answer 1

ok then this must be the issue be clear with class and functional component this keyword can be used only in class component!!
check this link for further reference link
in your case have a console in
<TableContainer component={Paper}>
{console.log('callData', props.callData)}
<Table aria-label="collapsible table">
you will get the value of callData use that to display in table