So I have a simple reactJS app that contains a app.js with a HomePage.js
The HomePage.js need to display some data for me that I fetch trough an await API.get method from amplify. ( : https://docs.amplify.aws/lib/restapi/fetch/q/platform/js/ )
The API.get method triggers the .then response and then gives me exactly the correct array with item that I want.
Now I want to render those items on my HomePage.js, which is a functional component.
My app.js looks like this (ignore the token stuff, this is another problem i need to solve) :
import React, { useState } from "react";
import logo from './logo.svg';
import './App.css';
import Amplify, { API, Auth } from 'aws-amplify';
import { withAuthenticator , Link } from "@aws-amplify/ui-react";
import '@aws-amplify/ui-react/styles.css';
import { Button } from '@aws-amplify/ui-react';
import Appbar from "../src/components/Appbar/Appbar";
import Homepage from './components/Homepage/Homepage';
// let user;
let user = {};
let userName = "placeholder";
// let pageLoaded = false;
let passArray;
let zorgSearchData;
function App() {
callApi();
async function callApi() {
user = await Auth.currentAuthenticatedUser()
const token = user.signInUserSession.idToken.jwtToken
userName = user.username;
const requestData = {
headers: {
Authorization: token
}
}
zorgSearchData = await API
.get('caresyncapi' , '/items/zorgsearch/' + userName)
.then(response => {
console.log("resp!")
console.log(response);
passArray = response;
})
}
return (
<div className="App">
<Appbar/>
{<Homepage passedArray={passArray} />}
</div>
);
}
export default withAuthenticator(App);
The API.get calls and the .then prints out the exact response I want. I pass passArray as a prop to HomePage.js which (i think and am probably wrong) should update with the new data. The problem is when the .then is called there is no change in the Homepage.js . The props I retrieve in Homepage.js is always undefined. I think this is because the API is async and retrieves the prop after I pass it for the first time. But how do I update this? Anyway, my Homepage.js looks like this:
import React, { useState } from 'react';
import "./homepage.css";
import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import { Typography } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
}));
const Homepage = ({props}) =>{
const classes = useStyles();
const [age, setAge] = useState('');
console.log(props);
function handleChange (event) {
console.log(event.target.value);
// console.log({passedData})
//setAge(event.target.value);
};
return (
<>
<Typography variant="h1">{`Welcome,username`}</Typography>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={age}
onChange={handleChange}
label="Patienten"
>
{/* {this.state.searchData.map(x=> <MenuItem >{x.PatientNaam}</MenuItem>)} */}
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
<div className="homepage-container">
<div className="homepage-text-container">
<h1 className="welcome-message">Hello, {props}</h1>
<p>lorem ipsum</p>
</div>
<div className="chart-container">
<div className="chart-1">
<h3>Chart 1</h3>
<div className="chart"></div>
<p>More text....</p>
<p></p>
</div>
</div>
</div>
</>
)
}
export default Homepage
As you can see I am also trying to fill the select form with my array names, but I think I can figure that out as long as I have a valid array. I tried different methods of the handleChange and passing props, but nothing seems to work.
TL;DR : I have a app.js which calls an async get function, this returns a valid object I use. The problem is I pass this object array to Homepage.js ( {} ) before the async method returns a value. So the array is always undefined in Homepage.js
Can someone point me in the right way? Do I need to force a change? Is there a way to pass the prop again? Is there something I can do in the handleChange method? I can access the .then method, do I need to do something from there? Simply updating the variable doesn’t seem enough.
Thanks in advance! Sorry for the ramble im new to reactJS and I am trying to solve this problem after a few beers.