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?

#2

You are exporting your App component, so what does the file look like that imports it? Are you rendering it to the DOM in the other file, because you are not doing that in the index.jsx file you show above.

#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;
#4

Do you have your full project on GitHub? It would be easier to debug if we could see the folder structure of all the files involved.

#5