Skip to content

False Missing "key" prop for element in iterator from jsx-key #320

Closed
@lencioni

Description

@lencioni

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions