Use fragments instead of arrays when returning elements

Summary: Returning arrays from render kills react-reconciliation and produces missing key warnings. Turned all array rendering methods to use Fragments, where I could find them.

Reviewed By: jknoxville

Differential Revision: D21178253

fbshipit-source-id: 85ddf8adfa79732ccbe68409fdcf150399455983
This commit is contained in:
Michel Weststrate
2020-04-23 03:45:43 -07:00
committed by Facebook GitHub Bot
parent 67412bfb43
commit f07d898a35
5 changed files with 73 additions and 57 deletions

View File

@@ -299,30 +299,32 @@ class ImageGrid extends PureComponent<{
return null;
}
return [
<ImageGridHeader
key="header"
title={this.props.title}
subtitle={this.props.subtitle}
onClear={this.props.onClear}
/>,
<ImageGrid.Content key="content">
{images.map((imageId) => (
<ImageItem
imageId={imageId}
image={this.props.imagesMap[imageId]}
key={imageId}
selected={selectedImage != null && selectedImage === imageId}
onSelected={onImageSelected}
size={this.props.size}
numberOfRequests={
this.props.events.filter((e) => e.imageIds.includes(imageId))
.length
}
/>
))}
</ImageGrid.Content>,
];
return (
<>
<ImageGridHeader
key="header"
title={this.props.title}
subtitle={this.props.subtitle}
onClear={this.props.onClear}
/>
<ImageGrid.Content key="content">
{images.map((imageId) => (
<ImageItem
imageId={imageId}
image={this.props.imagesMap[imageId]}
key={imageId}
selected={selectedImage != null && selectedImage === imageId}
onSelected={onImageSelected}
size={this.props.size}
numberOfRequests={
this.props.events.filter((e) => e.imageIds.includes(imageId))
.length
}
/>
))}
</ImageGrid.Content>
</>
);
}
}