React UseState interface and eslint - am I doing this right?

eslint no-unused-vars rule is failing on the variables in the interfaces for my react components.

I have n-number of components and I manage their state from the parent component, so I declare an interface in the component and pass the useState from the parent component to the child component using props.

Each component starts with an interface declaration like so

interface createCategoryModalProps {
  showCreateCategoryModal: boolean;
  setShowCreateCategoryModal: (show: boolean) => void;
  parentCategory: number;
}


And the component renders itself conditionally based on the value of showCreateCategoryModal.

eslint no-unused-vars is failing for the variable
show
in the interface declaration because it is never used. The setShowCreateCategoryModal gets assigned to the values coming from the parent component defining

const [showCreateCategoryModal, setShowCreateCategoryModal] = useState(false);


This means that the modal is hidden by default until setShowCreateCategoryModal(true) is called.

Is the right approach here to add a rule to eslint config that disables checking arguments starting with an underscore and adding an underscore to the
show
variable name? Or am I doing react wrong?

FWIW I am running
pnpx next lint
to run eslint
Was this page helpful?