#NEED HELP

[eliasbnk]

@jacobvr IDK what this means?

I know that these 2 lines are causing the trouble:

let bookCount = filteredElements.length + 1;
            handleNotStartedBookCount(bookCount);

in this code:

export const NotStartedBooks = ({ booksList, editBookStatus, addNewBook }) => {
  const { query, handleNotStartedBookCount } = useBooksContext();
  if (booksList === undefined) return <AddNewBook />;
  return (
    <>
      <div style={{ marginTop: 200 }} />
      <div>
        <AddNewBook addNewBook={addNewBook} />
      </div>

      {booksList
        .filter((book) => book.status === 'not started')
        .reduce((filteredElements, curr) => {
          if (
            curr.title.toLowerCase().includes(query) ||
            curr.author.toLowerCase().includes(query)
          ) {
            let bookCount = filteredElements.length + 1;
            handleNotStartedBookCount(bookCount);
            return filteredElements.concat([
              <div
                key={`books-to-read-page-${curr?.id}`}
                style={{ marginTop: 25, paddingBottom: 15 }}
              >
                <Book
                  book={curr}
                  editBookStatus={editBookStatus}
                  buttonActionOne={'reading'}
                  buttonActionTwo={'completed'}
                />
              </div>,
            ]);
          }
          return filteredElements;
        }, [])}
    </>
  );
};

The Error:

[eliasbnk]

I somehow need to calculate the length of the filtered array and set the count in the navbar before the components are opened as it adds this ugliness when the user first opens the site.

[eliasbnk]

only the first tab is calculated upon the first render, then after you cycle through the tabs it calculates the count forthose too.