Solucionar problema – Prop spreading is forbidden eslint(react/jsx-props-no-spreading)

Si en este momento estas tratando de implementar ESLint en ReactJS o alguno otro framework de JavaScript es probable que te llegues a encontrar el siguiente error o alerta:

Prop spreading is forbidden eslint(react/jsx-props-no-spreading)

Esta error corresponde a la regla “react/jsx-props-no-spreading” de ESLint, la cual nos obliga cumplir que no haya propagación para ningún atributo JSX en nuestros componentes, ofreciendo como beneficio que mejore la legibilidad de nuestro código ya que nos obliga a establecer que propiedades recibe cada uno de nuestros componentes, evitando así que existan propiedades no utilizadas en nuestra aplicación.

Si lo que buscas es solucionar de forma sencilla este problema, puedes inhabilitar esta regla completamente mediante el siguiente código en tu archivo de configuración ESLint (.eslintrc.json):

"rules": {
    "react/jsx-props-no-spreading": 0
}

En caso contrario si lo que buscas es inhabilitar esta regla en algunos componentes específicos, los cuales consideras que es necesaria la propagación de atributos, puedes hacer uso del siguiente fragmento de código, en el cual puedes definir un arreglo de excepciones en las que no se aplicara esta regla:

"rules": {
    "react/jsx-props-no-spreading": ["error", {
        "exceptions": ["Input", "TextArea"]
    }]
}

A mi punto de vista la segunda opción es la más recomendable, ya que si tienes un componente muy especial que necesite propagación, puedes agregarlo al arreglo de excepciones sin afectar todo el código, mientras que con la primera opción de código inhabilitarías la regla completamente y estaría propenso a caer en este antipatrón.