How do make sure getData() runs before MovieCard function?

by

I’ve been making a simple random movie generator app with react js and material ui but I’ve been having trouble with async functions. From what I understand, data isn’t grabbed from the API fast enough to provide it to the component I made. How do I correct this? Is there a way to make sure I grab the data before showing it? Also, how do I display an image link as an image on react? Any help would be great. Thanks!

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import { Grid } from '@material-ui/core';
import BTTF from "./BTTF.jpg";
import ratings from "./ratings.csv"

var movie;
var plot;

async function getData(){
  const response = await fetch(ratings);
  const movieData = await response.text();
  
  const table = movieData.split('\n').slice(1);
  const movieChoice = table[Math.floor(Math.random() * 171)];

  const columns = movieChoice.split(',');
  const id = columns[0];

  const url = `http://www.omdbapi.com/?i=${id}&apikey=d3852437`;
  const poster = `http://img.omdbapi.com/?i=${id}&apikey=d3852437`;
  
  const responseAPI = await fetch(url);
  const APIData = await responseAPI.json();
  movie = APIData.Title;
  plot = APIData.Plot;

  console.log(APIData);
  
  console.log(`URL: ${url} + ${poster}\n Movie: ${movie}\n Plot: ${plot}`);

  


}

getData();


const MovieCard = () =>{

    
    const useStyles = makeStyles({
        root: {
            width: 300,
        },
        media: {
            height: 435,
        },
    });

    const classes = useStyles();

    return <Grid container justify="center" alignItems="center" direction="column">
      <Card className={classes.root}>
      <CardActionArea>
        <CardMedia
          className={classes.media}
          image={BTTF}
          title={movie}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {getData.movie}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {plot}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions style={{justifyContent: 'center'}}>
        <CardActions >
          <Button variant="outlined" color="secondary">Generate</Button>
        </CardActions>
      </CardActions>
    </Card>
    </Grid>
    
}

export default MovieCard;

100 thoughts on “How do make sure getData() runs before MovieCard function?”

  76. Simply wish to say your article is as amazing. The clarity
    for your post is simply spectacular and that i can suppose you’re
    a professional on this subject. Fine along with your permission let me to take hold of your feed to keep updated with coming near near post.
    Thanks 1,000,000 and please keep up the rewarding work.

    Reply

  77. Ahaa, its fastidious dialogue regarding this article at
    this place at this web site, I have read all that, so at this
    time me also commenting at this place.

    Reply

  78. Wow! This blog looks exactly like my old one! It’s on a completely different subject but it has
    pretty much the same page layout and design. Superb choice of colors!

    Reply

  79. Hi there all, here every person is sharing these know-how, thus
    it’s good to read this webpage, and I used to pay a quick visit this website everyday.

    Reply

  80. Hello there! This blog post couldn’t be written any better!

    Going through this post reminds me of my previous roommate!
    He continually kept talking about this. I’ll send this post
    to him. Pretty sure he will have a great read. Thanks for
    sharing!

    Reply