Step 7: Search bar

Let’s add a Search bar to the app! Create a new file, Search.jsx, inside the components folder with the following content:

import { Input } from "@mantine/core";
import { IconSearch } from "@tabler/icons";
import PropTypes from "prop-types";

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

  const handleOnChange = (event) => {
    setQuery(event.target.value);
  };

  return (
    <Input
      icon={<IconSearch />}
      placeholder="Your search query"
      value={query}
      onChange={handleOnChange}
    />
  );
}

export default Search;

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

Next, update the App.jsx as follows

+ import Search from "./components/Search";
	
  function App() {
    const [notes, setNotes] = useState([]);
+   const [query, setQuery] = useState("");

    return (
      <Container>
+       <Search query={query} setQuery={setQuery} />
        <Notes notes={notes} />
      </Container>
    );
  }
	
  export default App;

Notice Search is a “controlled component.”