React: No errors but component not displaying

JavaScript
1

Right now all I have is my main index.jsx and a single component, MovieList.js. However, nothing is displaying although I don’t have errors.

Here is my index.jsx

import React, { useState } from 'react';
import MovieList from './components/MovieList';

import '../assets/stylesheets/application.scss';

const App = () => {
  const [movies] = useState([{
            "Title": "Star Wars: Episode IV - A New Hope",
            "Year": "1977",
            "imdbID": "tt0076759",
            "Type": "movie",
            "Poster": "https://m.media-amazon.com/images/M/MV5BNzVlY2MwMjktM2E4OS00Y2Y3LWE3ZjctYzhkZGM3YzA1ZWM2XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"
        },
        {
            "Title": "Star Wars: Episode V - The Empire Strikes Back",
            "Year": "1980",
            "imdbID": "tt0080684",
            "Type": "movie",
            "Poster": "https://m.media-amazon.com/images/M/MV5BYmU1NDRjNDgtMzhiMi00NjZmLTg5NGItZDNiZjU5NTU4OTE0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"
        },
        {
            "Title": "Star Wars: Episode VI - Return of the Jedi",
            "Year": "1983",
            "imdbID": "tt0086190",
            "Type": "movie",
            "Poster": "https://m.media-amazon.com/images/M/MV5BOWZlMjFiYzgtMTUzNC00Y2IzLTk1NTMtZmNhMTczNTk0ODk1XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg"
        }]);
  return (
    <div>
      <MovieList movies={movies} />
    </div>
  );
};

export default App;

And my MovieList.js

import React from 'react';

const MovieList = (props) => {
  return (
    <React.Fragment>
      {props.movies.map((movie, index) => (
      <div>
        <img src={movie.Poster} alt='movie'></img>
      </div>
      ))}
    </React.Fragment>
  );
};

export default MovieList;

I have no errors showing up, but I also can’t see the poster which I am calling in the MovieList component. What am I missing here?

3

Ok I think I know what I am doing wrong, I tried to make my App function in my index.jsx. I made a new file called app.js in my src folder and moved my code over there. This is my new Index.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import '../assets/stylesheets/application.scss';

ReactDOM.render(
  <React.StrictMode>
  <App />
  </React.StrictMode>,
  document.getElementById('root')
  );

However I am getting this error: “Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.”
Here is my App.js

import React, { useState } from 'react';
import MovieList from './components/MovieList';

import '../assets/stylesheets/application.scss';
//Testing
const App = () => {
  const [movies, setMovies] = useState([{
            "Title": "Star Wars: Episode IV - A New Hope",
            "Year": "1977",
            "imdbID": "tt0076759",
            "Type": "movie",
            "Poster": "https://m.media-amazon.com/images/M/MV5BNzVlY2MwMjktM2E4OS00Y2Y3LWE3ZjctYzhkZGM3YzA1ZWM2XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"
        },
        {
            "Title": "Star Wars: Episode V - The Empire Strikes Back",
            "Year": "1980",
            "imdbID": "tt0080684",
            "Type": "movie",
            "Poster": "https://m.media-amazon.com/images/M/MV5BYmU1NDRjNDgtMzhiMi00NjZmLTg5NGItZDNiZjU5NTU4OTE0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"
        },
        {
            "Title": "Star Wars: Episode VI - Return of the Jedi",
            "Year": "1983",
            "imdbID": "tt0086190",
            "Type": "movie",
            "Poster": "https://m.media-amazon.com/images/M/MV5BOWZlMjFiYzgtMTUzNC00Y2IzLTk1NTMtZmNhMTczNTk0ODk1XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg"
        }]);
  return (
    <div>
      <MovieList movies={movies} />
    </div>
  );
};

export default App;