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
prop-types for stateless function components #237
Comments
How could it? Stateless function components don't have a way of defining proptypes. It would be impossible for one to satisfy the rule. |
The same way as adding to classes without using const Detaljer = ({ detaljer, feilkode }) => {
if (Array.isArray(detaljer)) {
return (
<ul>
{detaljer.map((detalj, i) => <li key={i}><Detalj detalj={detalj}/></li>)}
</ul>
);
}
return (
<div className="enkeltmelding">
<Detalj detalj={detaljer}/>
{feilkode ? <span className="kursiv-skrift">Feilkode: {feilkode}</span> : null}
</div>
);
};
Detaljer.propTypes = {
detaljer: PropTypes.string.isRequired,
feilkode: PropTypes.string,
removeEvent: PropTypes.string.isRequired
}; |
I did not know that stateless functions could have some It is not supported by the plugin yet but I will work on it. |
Hmmm. Neither did I. Good to know! |
It's in the release notes as well 😄 http://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components
|
Yeah I just saw that. I don't believe that was mentioned in the blogpost for 0.14 RC1. Now I'm going back and re-adding propTypes to my converted components. |
Thank you for all your great work @yannickcr! Your plugin has been very useful :) |
I don't think eslint will ever be able to know the difference between a function that returns jsx and a React "stateless component", without a hint like a propTypes member. |
Ah, sweet! Can't wait for the release 😄 |
I hope it will works fine, like @dbrans said, it is hard to detect is we are in a stateless component. So I had to do some compromises (the function need to return some JSX or a call to React.createElement). I will document it in the rule documentation. |
@yannickcr another method would be to check if the first parameter is (props) => {}; |
@gajus - what if someone does this:
|
FWIW, I've used this function in one of my codemods:
which did the trick of detecting Pure components pretty well, although it's I think too heavy |
@yannickcr: Looks like you have the same conundrum as oliviertassinari/babel-plugin-transform-react-remove-prop-types#1 (cc/ @oliviertassinari), which is that it's difficult to detect whether a function is in fact a stateless component. I see an elaborate method in https://github.com/reactjs/react-docgen/blob/713e848b80bc7e93778c4c6666d1cfde4d8e6e29/src/utils/isStatelessComponent.js, and I wonder if @fkling has any interest in making that a module of its own so other tools (like eslint-plugin-react and babel-plugin-transform-react-remove-prop-types) can use it. Any thoughts? |
@yannickcr #237 (comment) But if the function does something like below -
then it seems that the plugin doesn't recognize it as returning some JSX and thus the prop-types validation is not run. |
@prithsharma please file a new issue for that, and we can take a look |
Here you go - #1046 |
If you have no logic in your component you can even make it a bit more concise: const MyComponent = (props) => (
<div>
<b>{props.firstname}</b>
</div>
);
MyComponent.propTypes = {
firstname: React.propTypes.string,
};
export default MyComponent; Notice there is no return statement or curly brackets on the component. |
(although then your component doesn't have an explicit name; it's best to use normal functions, not arrows, for SFCs) |
@ljharb - If I'm not mistaken, theoretically you can do:
to retain the component name. Although it'll be writing characters to save a few characters ;) |
Exactly right; but I'm also talking about the function's name property, which is useful for debugging, and more reliable when explicit. |
If it helps someone, I was having trouble with this ('post' is missing in props validation (react/prop-types)): export default Post = ({ post }) => (
<div>{post.title}</div>
);
Post.propTypes = {
post: PropTypes.arrayOf(PropTypes.object).isRequired,
}; but this did not have anymore issues: const Post = ({ post }) => (
<div>{post.title}</div>
);
Post.propTypes = {
post: PropTypes.arrayOf(PropTypes.object).isRequired,
};
export default Post; |
@armenzg that seems like a bug. Can you file that as a new issue? |
I just had this issue and it turned out to be a typo that wasn't highlighted by ES Lint. Problem: import React from 'react'
import PropTypes from 'prop-types'
import { NavLink } from 'react-router-dom'
import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
// these two props were being highlighted as missing proptypes (which was actually true)
const ListActionsMenu = ({ thingRoute, serialNumber }) => {
const MENU_ITEMS = [
<li key='view'>
<MenuItem>
<NavLink to={`/${thingRoute}/view/${serialNumber}`}>View</NavLink>
</MenuItem>
</li>,
<li key='edit'>
<MenuItem>
<NavLink to={`/${thingRoute}/edit/${serialNumber}`}>Edit</NavLink>
</MenuItem>
</li>,
<li key='deactivate'>
<MenuItem>
<NavLink to={`/${thingRoute}/deactivate/${serialNumber}`}>Deactivate</NavLink>
</MenuItem>
</li>
]
return (
<Wrapper
className='list_results-actions'
onSelection={() => null}>
<Button className='list_results-actions-icon'>
<i className='fa fa-more-horiz' />
</Button>
<Menu className='list_results-actions-menu'>
<ul>{MENU_ITEMS}</ul>
</Menu>
</Wrapper>
)
}
// but, it was due to this capitalized P
ListActionsMenu.PropTypes = {
thingRoute: PropTypes.string.isRequired,
serialNumber: PropTypes.string.isRequired
}
export { ListActionsMenu } @yannickcr @ljharb I figured I would just drop this example scenario in here, in case it is desired to analyze for any API hardening. I was really confused why it was saying there was no prop types, and that would have been a 2 second fix if ES Lint had warned me that It could be nice to somehow get a red underline on |
There’s already a no-typos rule that should handle that. |
I also just ran into @amackintosh issue. I was able to trigger the typo detection by including
|
This seem to still be an issue. For stateful components missing prop-types are detected, but for a stateless functional component I get zero errors. |
@ViggoV if so, please file a new issue with as much code and eslint output as possible. |
prop-types
doesn't seem to trigger when using https://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-componentsThe text was updated successfully, but these errors were encountered: