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.
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;