Step 8: Filter Notes

To filter the notes, we must pass the query to the Notes component as follows:

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

Next, update the Notes.jsx to filter based on the query

import Note from "./Note";
import PropTypes from "prop-types";
import { Accordion } from "@mantine/core";

function Notes(props) {
  const { notes, query } = props;

  return (
    <Accordion chevronPosition="left">
      {notes
        .filter(
          (note) =>
            note.title.toLowerCase().includes(query.trim().toLowerCase()) ||
            note.text.toLowerCase().includes(query.trim().toLowerCase())
        )
        .map((note, index) => (
          <Note key={index} note={note} />
        ))}
    </Accordion>
  );
}

export default Notes;

Notes.propTypes = {
  query: PropTypes.string,
  notes: PropTypes.arrayOf(
    PropTypes.shape({
      title: PropTypes.string.isRequired,
      text: PropTypes.string.isRequired,
    })
  ),
};

Try searching for a phrase: