Command Shift

Structure - Walkthrough

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.

On this page

No Headings