Adding a key to children of an externally defined component.

[jeluyapp]

I'm attempting to integrate https://reactnavigation.org/docs/hello-react-navigation into my react-native application. The definition I have created is here:

@JSImport("@react-navigation/native", "NavigationContainer")
@js.native
object ReactNavigationContainer extends js.Object

@react object NavigationContainer extends ExternalComponent {
  case class Props(children: ReactElement*)
  override val component = ReactNavigationContainer
}

When I use the component at the top level, I get the following error for that component in the console: Warning: Each child in a list should have a unique "key" prop.

I'm wondering if there is a way to resolve this easily.

[shadaj]

Ah, so instead of explicitly taking children as a parameter in the props, you can instead just pass the children as a curried paramter:

NavigationContainer(...)(
  child,
  child2
)

this should avoid the error by having React know that these children were constructed explicitly and not part of a list.