question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Eslint giving error for duplicate props

See original GitHub issue

This is not a bug request, but rather, it’s a discussion on the reasons why you named 2 prop types of TextField almost the same with one being upper case.
According to TextField API,
TextField exposes two prop types with almost same names. InputProps and inputProps.
Currently, my Eslint gives me an error for having duplicate prop type.
Is there any reason to name 2 prop types almost the same?
Can’t we rename 1 of them to something more clarifying?
This also gives headaches with linting tools.

Expected Behavior

Eslint or any other linting tool doesn’t give me any duplicate error.(react/jsx-no-duplicate-props).

Current Behavior

Eslint throwing duplicate prop error.

Plugin is located here.

##Temporal solution
Yes, you can set ignoreCase to false in .eslintrc but isn’t it better to name our props in a more definitive way? Thank you.

Your Environment

Tech Version
Material-UI 1.0.0-beta30
React ^16.0.0
eslint ^4.8.0

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:17
  • Comments:16 (11 by maintainers)

github_iconTop GitHub Comments

55reactions
oliviertassinaricommented, Mar 14, 2018

I have found the following solution to the problem: much cleaner:

<TextField
- inputProps={{
-   foo: true
- }}
  InputProps={{
    bar: true,
+   inputProps: {
+     foo: true,
+   },
  }}
13reactions
nghtstrcommented, Jan 31, 2019

I think an even better solution is to have InputProps do as what is expected, but change inputProps to NativeInputProps. That is far more descriptive as to what it does. Having it as the same name, but differing only by the case of the property is prone to errors and simple typos. Changing the native element props to NativeInputProps keeps with the standard of having the properties staring with an upper case as well as makes it far more descriptive.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Eslint giving error for duplicate props #10064 - mui/material-ui
Eslint throwing duplicate prop error. Plugin is located here. ... Yes, you can set ignoreCase to false in .eslintrc but isn't it better...
Read more >
Why am I getting this warning `No duplicate props allowed ...
I also go this error, I was rendering a component and passed 'className' twice. My solution was found ...
Read more >
no-duplicate-case - ESLint - Pluggable JavaScript Linter
This rule disallows duplicate test expressions in case clauses of switch statements. ... /*eslint no-duplicate-case: "error"*/ var a = 1, one = 1; ......
Read more >
eslint-plugin-jsdoc - npm
eslint -plugin-jsdoc options, if present, are generally in the form of an object supplied as the second argument in an array after the...
Read more >
Basic Features: ESLint - Next.js
You can now run next lint every time you want to run ESLint to catch errors. Once ESLint has been set up, it...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found