I'm making a note-taking app in React and I have some data that looks like this. I'm wanting to filter it so that only the objects which contain a tag in an array remain, and the rest are removed.

Raw Data

const obj = {
  Mon: [
    { id: 1, content: 'Some text', tag: 'home' },
    { id: 2, content: 'Some text', tag: 'work' },
    { id: 3, content: 'Some text', tag: 'project' },
  ],
  Tue: [
    { id: 4, content: 'Some text', tag: 'project' },
    { id: 5, content: 'Some text', tag: 'moving' },
  ],
  Wed: [
    { id: 6, content: 'Some text', tag: 'home' },
    { id: 7, content: 'Some text', tag: 'home' },
    { id: 8, content: 'Some text', tag: 'work' },
  ],
};

Desired data after filtering "home" and "work"

Array to use as filtering terms

const filterTags = ['home', 'work']

Data we are left with

{
  Mon: [
    { id: 1, content: 'Some text', tag: 'home' },
    { id: 2, content: 'Some text', tag: 'work' },
  ],
  Wed: [
    { id: 6, content: 'Some text', tag: 'home' },
    { id: 7, content: 'Some text', tag: 'home' },
    { id: 8, content: 'Some text', tag: 'work' },
  ],
};

The reason for wanting to filter using an array is because I want a user to be able to click on the tags for the notes they want to see (these tags are currently stored in a useState()).

With the remaining data after filtering, I plan to map through it and render the relevant elements like this:

<>
  {Object.entries(sortedNotesData).map(
    ([noteDate, noteContent], i) => (
      <div key={i}>
        <NoteDate noteDate={noteDate} />
        <div className="column">
            {noteContent
              .map((note) => (
                <>
                  <NoteCard
                    key={note.id}
                    id={note.id}
                    content={note.content}
                    tag={note.tag}
                  />
                </>
              ))}
        </div>
      </div>
    )
  )}
</>

Any suggestions on a best practice way of filtering the raw data would be brilliant, including whether it would be best to handle the data filtering in a function outside of render(), or whether it can be done inline just before the .map().