The latest updates on your projects. Learn more about Vercel for Git ↗︎

hmm probably I need to explain better, I'll re-word a bit.

In short it's not outdated, because we decided in the implementation of stenciljs/core#5143 not to insert keys into JSX nodes which are within curly braces (a JSX expression) because there are just so many possibly things that could be going on there that it's very hard to know when it would be safe to add keys to elements without breaking the user's expectation for how their component should render.

An example would be a usage of Array.prototype.map like in that example. If the user had a component with something like:

render() {
  return (
    <div>
      {this.todos.map((todo) => (
        <div>
          <div>{todo.taskName}</div>
        </div>
      ))}
    </div>
  )
}

and we inserted keys automatically the transformed code would look something like this:

render() {
  return (
    <div>
      {this.todos.map((todo) => (
        <div key="a-key">
          <div>{todo.taskName}</div>
        </div>
      ))}
    </div>
  )
}

this is because the transformation is done at compilation-time and on the basis of the syntax tree nodes that the transformer finds, not at runtime based on the actual data found in this.todos. This would create a problem where the keys would make all the children look identical. So for that reason we need to not insert keys in three situations:

1. within a JSX expression (i.e. the curly braces in <div>{ foo }</div>
2. when a render method has more than one return
3. when the first child of the return keyword in a render method is a conditional expression (aka ternary)

the 2nd and 3rd are necessary for us to avoid because in each we can't assume that the user's intent is for the two (or more) different branches in 'return behavior' to be matched up, and inserting keys in that situation would change the rendering behavior for a lot of cases.

Anywhoo - hopefully that helps explain a bit of how this works, I'll update to clarify more what is meant by the transformation not happening within a JSX expression

Thanks @alicewriteswrongs , that clears things up!

@christian-bromann I updated this a bit, lmk what you think!