Destructing lint error even when Destructing

Question

I am getting linting errors as follows. Why is this occurring even when I destruct?

error Must use destructuring props assignment react/destructuring-assignment

The lines with issues.

const { imageName, header, description } = props.cardContentData || {};

const { description, content = [] } = props.cardData || {};

Answer 1

Break it out as follows. It is complaining about destructuring on the props.cardData.

  const { cardData } = props;
  const { description, content = [] } = cardData || {};

Answer 2

Seems like the linter wants you to write

const { cardContentData: { imageName, header, description } = {} } = props;
const { cardData: { description, content = [] } = {} } = props;

or in a single statement

const {
  cardContentData: { imageName, header, description } = {},
  cardData: { description, content = [] } = {},
} = props;

Notice that unlike your original code that uses ||, defaulting the props properties to {} only works when they're undefined, not other falsy values (in particular null).