Description
First of all, great work on the jsx-key rule. I think this will save people a lot of time.
Now, I have the following code:
<TransitionMotion
styles={this._getStyles()}
willEnter={this._willEnter}
willLeave={this._willLeave}
>
{styles =>
<div>
{Object.keys(styles).map(key =>
<Toast
action={styles[key].action}
key={key}
message={styles[key].message}
opacity={styles[key].opacity}
translateY={`${styles[key].translateY}%`}
/>
)}
</div>
}
</TransitionMotion>
using the jsx-key rule, I am getting the missing key prop on the line that has the opening <div>
. I might be misunderstanding when key
should be used, but I don't think I need one here. And, if I do, then the error message that this rule outputs is misleading since it claims that I am in an iterator when I am not.
I noticed in the documentation:
Also, if you have some prevalent situation where you use arrow functions to return JSX that will not be held in an iterable, you may want to disable this rule.
which I believe is referring to this situation, but I figured I'd open an issue for this anyway in case there happens to be a solution lurking.