Error when using setState to set an empty array to object property ( react Hooks)

Question

im having problems with this line:

useEffect(() => {
  if (AplicationsList) {
    setDetail({ ...Detail, components: AplicationsList });
  }
}, [AplicationsList]);

When AplicationsList its an empty array [] it gives me an error, like Detail is then undefined. But when its not empty works fine... either if the array its empty or not I have to set the value on components attribute of Detail. Any idea why this is happening?

This is the error I'm facing in the child component that depends on "Detail" passed as props: cannot read property map of undefined

And I get this react warning: can't perform a react state update in an unmounted component

I've tried with this functional update but still is giving me the same errors: setDetail(Detail => ({...Detail, components: AplicationsList, }));

Answer 1

From you question, I understand Details is an object and AplicationsList is an array.

I think you have set the state of details this way or similar to this const [Details, setDetails] = useState(); . The problem with this is the initial value of Details is undefined and you are trying to destructure undefined. Instead set it as const [Details, setDetails] = useState({});

In useEffect you are checking if AplicationsList is empty, but if(AplicationsList) return true even for empty array. So check for the length instead, if(AplicationsList.length > 0)

Suggestion: It's good practice to have the state variable name to be of lowerCase and follow camleCase format to name variable. Instead of Details and ApplicationsList , its good you rename to details and applicationsList .