Accepted answer

i suspect its because you're not covering a state when listproduct is null. when it loads, it immediately renders, as it's getting your product data, so products can be empty, and the .find() would return a null, then you're trying to render listproduct.title while it's null. ideally, your render should check for listproduct being available or not.

even better, have a few states of your component, like loading data, showing data, no data.

    { datastatus === "loaded" &&
    { datastatus === "loading" &&
    { datastatus === "error" &&
      <card.error>sorry, we had an oopsie...</card.error>
    { datastatus === "empty" &&
      <card.empty>looks like we're missing something...</card.empty>

further explanation and code examples here:

Related Query

More Query from same tag