My current challenge involves fetching data from a REST endpoint using axios, rendering it in my app.js component, and then sharing it with the entire app through the context API:
axios.js
import axios from 'axios';
const instance = axios.create({
baseURL: 'api_endpoint'
});
export default instance;
app.js
import Context from './context'
class App extends Component {
constructor(props) {
super(props)
this.state = {
comp: []
}
};
async componentDidMount() {
await instance.get('')
.then(res => {
const data = JSON.stringify(res.data.data)
this.setState({comp: data});
console.table('componentDidMount', data); // here I can log the data
})
.catch(err => {
console.log(err)
});
}
render () {
return (
<Context.Provider
value={{
comp: this.state.comp
}}>
</comp.Provider>
);
}
}
export default App;
children.js
import Context from '../../context'
class Children extends Component {
render () {
const { classes } = this.props;
return (
<Context.Consumer>
{context => (
<Paper className={classes.root}>
<Table className={classes.table}>
<TableHead>
<TableRow>
<CustomTableCell>comp_id</CustomTableCell>
<CustomTableCell align="right">comp_name</CustomTableCell>
<CustomTableCell align="right">comp_price</CustomTableCell>
<CustomTableCell align="right">comp_log_usd</CustomTableCell>
</TableRow>
</TableHead>
<TableBody>
{Object.entries(context.comp).forEach(([key, value]) => (
<TableRow className={classes.row} key={value.id}>
<CustomTableCell component="th" scope="row">
{value.id}
</CustomTableCell>
<CustomTableCell align="right">{value.name}</CustomTableCell>
<CustomTableCell align="right">{value.price}</CustomTableCell>
<CustomTableCell align="right">{value.log.usd}</CustomTableCell>
</TableRow>
))}
</TableBody>
</Table>
</Paper>
)}
</Context.Consumer>
);
}
I have encountered two issues. The first is that despite successfully logging and testing the "log" property, when rendered, an error stating "Cannot read property 'log' of undefined" occurs.
The second issue arises when I remove a CustomTableCell containing this property. It causes my data to load outside the table, displaying the entire array of objects separately.
Any assistance on resolving these challenges would be greatly appreciated.