Your App.js
file should now look like this after adding the useState
hook and searchResults
:
import React, { useState } from "react";
import "../styles/app.css";
import Search from "./Search";
const App = () => {
const [searchResults, setSearchResults] = useState();
return (
<div className="app">
<img
className="nasa-logo"
src="https://cdn.cnn.com/cnnnext/dam/assets/200424060716-nasa-worm-logo.jpg"
alt="nasaLogo"
/>
<Search setSearchResults={setSearchResults} />
</div>
);
}
export default App;
And our Search.js
file should now look like this:
const Search = ({ setSearchResults }) => {
const [value, setValue] = useState();
const handleSubmit = (event) => {
event.preventDefault();
setSearchResults(getImages(value));
};
...
Well done if you got this without the walkthrough! Let’s move on to creating our next component.