score:4

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.

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

further explanation and code examples here: https://davidlozzi.com/2021/05/14/keeping-react-components-state-top-of-mind/


Related Query

More Query from same tag