Interview Answer React

App.jsx

import { useState, useEffect } from 'react'
import './App.css'

export default function App() {
  const [movies, setMovies] = useState([])
  const api = 'https://simplejson.vercel.app/api/awOkOFOw'
  const getData = () => {
    fetch(api, {
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    })
      .then(function(response) {
        return response.json()
      })
      .then(function(json) {
        setMovies(json.movies)
      });
  }

  useEffect(() => {
    getData()
  }, [])

  return (
    <main>
      {movies.map((movie) => (
        <div key={movie.title} className="movie">
          <div className="title">{movie.title}</div>
          <div>{movie.rating}</div>
          <div>{movie.release}</div>
          <div>{movie.genres.join(', ')}</div>
        </div>
      ))}
    </main>
  )
}