error:Must use destructuring props - eslint; i'm using react+typescript

Question

I'm used to work with react in JS, I got the error,Must use destructuring props at line 14, while I'm defining a button to use it in a form This is my code:

import React from 'react';

interface IButtonProps
  extends React.DetailedHTMLProps<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement
  > {
  title: string;
}

const PrimaryButton: React.FC<IButtonProps> = (props: IButtonProps) => {
  return (
    <button type="submit" {...props}>
      {props.title}
    </button>
  );
};
export default PrimaryButton;```


is it essential to destruct in this example? or i can just disable that rule from eslint?

Answer 1

If you want to satisfy the lint rule - do what it says and destructure the value from your props object, instead of referencing it via a member expression.

If you don't care about the lint rule - then you should disable it in your eslint config.