-
-
Notifications
You must be signed in to change notification settings - Fork 31.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Eslint giving error for duplicate props #10064
Comments
Also, please note that Airbnb eslint style uses jsx-no-duplicate with ignore case of true. |
@mehrdaad This is key to the issue. https://github.com/airbnb/javascript/blob/53b2d7d245ba4abefc0429bfda4a46f099b9ace5/packages/eslint-config-airbnb/rules/react.js#L89
Input refers to the |
I've already read that in docs.
and also not getting an error from Airbnb style eslint rules. |
@mehrdaad I have added the |
I have found the following solution to the problem: much cleaner: <TextField
- inputProps={{
- foo: true
- }}
InputProps={{
bar: true,
+ inputProps: {
+ foo: true,
+ },
}} |
Add this to your
This will warn when there are two props of same name. Use |
I think an even better solution is to have |
I've had this same problem and @nghtstr has proposed an ACTUAL solution to a real problem as opposed to ignoring the problem literally by having the linter ignore it and ignoring any testing warnings etc. Temporarily the the property could be copied and have two names with a deprecation warning on the old one and then on a future update finally remove it. |
@oliviertassinari can we deprecate |
@matthewjwhitney What about |
doesn't matter to me as long as it's not a duplicate... |
I quite like this suggestion: #10064 (comment) (as did more people than 👍 the original issue. So, perhaps we drop the prop? |
The code change looks pretty trivial. Although in my experience moving a prop to the inherited component means for most API readers it doesn't exist. |
@mbrookes This solution requires more effort to be found without landing on this issue. It's non-obvious. A developer needs to look at the Input properties API. It's why we have added |
We can't do much beyond that. If people skip the very first paragraph then recovering from that is hard. change this in the api docs: const inputProps = {
step: 300,
};
-return <TextField id="time" type="time" inputProps={inputProps} />;
+return <TextField id="time" type="time" InputProps={{ inputProps }} />; Add a link to the Aside: |
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
andinputProps
.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
The text was updated successfully, but these errors were encountered: