Step 11: Header

Let’s refactor the app and move the Search component into a Header component. Later, we will add a button to the Header to add notes.

Add a file, Header.jsx, to the components folder with the following content:

import Search from "./Search";
import PropTypes from "prop-types";

function Header(props) {
  const { query, setQuery } = props;

  return (
    <>
      <Search query={query} setQuery={setQuery} />
    </>
  );
}

export default Header;

Header.propTypes = {
  query: PropTypes.string,
  setQuery: PropTypes.func,
};

Next, update the App.jsx as follows:

- import Search from "./components/Search";
+ import Header from "./components/Header";

  function App() {
	
    return (
      <Container>
-       <Search query={query} setQuery={setQuery} />
+       <Header query={query} setQuery={setQuery} />
        <Notes notes={notes} query={query} remove={remove} />
      </Container>
    );
  }