Must use destructuring props assignment issue

Question

I was making an app in react-native and when I try to put on text one of the values of props, I get an error message like this: Must use destructuring props assignment

The code is this:

<Text style={styles.SubTextButton}>
      {props.date1} - {props.date2}
</Text>

and the props look like this:

(props: {
  text: string
  date1: string
  date2: string
})

The thing is, this actually don't ruin my app and all work well. But I would like to know if it is maybe a question of format in the writing of the code or even an error of the ESlinter.

Answer 1

You get this warning because in your Eslint set the rule: "react/destructuring-assignment": [<enabled>, 'always']

Eslint wants you write in this way with using destructuring assignment:

const MyComponent = ({ date1, date2 }) => {
  return (
    <Text>
      {date1} - {date2}
    </Text>
  )
}