jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add keys to FeedbackComponent array elements

Browse Source 
Summary:
Was getting a react warning whenever the feedback prompt opens.
This stops it from happening.

Reviewed By: mweststrate

Differential Revision: D18780008

fbshipit-source-id: e4635f7a8322e25a3eea1c201974a100d1f1327a
This commit is contained in:
John Knox
2019-12-03 06:27:07 -08:00
committed by Facebook Github Bot
parent 8a616b2d88
commit 01deb97a5d
1 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/chrome/RatingButton.tsx
View File

@@ -95,7 +95,7 @@ const Spacer = styled(FlexColumn)({
function dismissRow(dismiss: () => void) { function dismissRow(dismiss: () => void) {
return ( return (
<DismissRow> <DismissRow key="dismiss">
<Spacer /> <Spacer />
<DismissButton onClick={dismiss}>Dismiss</DismissButton> <DismissButton onClick={dismiss}>Dismiss</DismissButton>
<Spacer /> <Spacer />
@@ -204,16 +204,19 @@ class FeedbackComponent extends Component<
switch (this.state.nextAction) { switch (this.state.nextAction) {
case 'select-rating': case 'select-rating':
body = [ body = [
<Row>{this.props.promptData.bodyText}</Row>, <Row key="bodyText">{this.props.promptData.bodyText}</Row>,
<Row style={{margin: 'auto'}}>{stars}</Row>, <Row key="stars" style={{margin: 'auto'}}>
{stars}
</Row>,
dismissRow(this.props.dismiss), dismissRow(this.props.dismiss),
]; ];
break; break;
case 'leave-comment': case 'leave-comment':
const predefinedComments = Object.entries( const predefinedComments = Object.entries(
this.state.predefinedComments, this.state.predefinedComments,
).map((c: [string, unknown]) => ( ).map((c: [string, unknown], idx: number) => (
<PredefinedComment <PredefinedComment
key={idx}
comment={c[0]} comment={c[0]}
selected={Boolean(c[1])} selected={Boolean(c[1])}
onClick={() => onClick={() =>
@@ -227,8 +230,8 @@ class FeedbackComponent extends Component<
/> />
)); ));
body = [ body = [
<Row>{predefinedComments}</Row>, <Row key="predefinedComments">{predefinedComments}</Row>,
<Row> <Row key="inputRow">
<Input <Input
style={{height: 30, width: '100%'}} style={{height: 30, width: '100%'}}
placeholder={this.props.promptData.commentPlaceholder} placeholder={this.props.promptData.commentPlaceholder}
@@ -240,14 +243,14 @@ class FeedbackComponent extends Component<
autoFocus={true} autoFocus={true}
/> />
</Row>, </Row>,
<Row> <Row key="contactCheckbox">
<Checkbox <Checkbox
checked={this.state.allowUserInfoSharing} checked={this.state.allowUserInfoSharing}
onChange={this.onAllowUserSharingChanged.bind(this)} onChange={this.onAllowUserSharingChanged.bind(this)}
/> />
{'Tool owner can contact me '} {'Tool owner can contact me '}
</Row>, </Row>,
<Row> <Row key="submit">
<Button onClick={() => this.onCommentSubmitted(this.state.comment)}> <Button onClick={() => this.onCommentSubmitted(this.state.comment)}>
Submit Submit
</Button> </Button>
@@ -256,7 +259,7 @@ class FeedbackComponent extends Component<
]; ];
break; break;
case 'finished': case 'finished':
body = [<Row>Thanks!</Row>]; body = [<Row key="thanks">Thanks!</Row>];
break; break;
default: { default: {
console.error('Illegal state: nextAction: ' + this.state.nextAction); console.error('Illegal state: nextAction: ' + this.state.nextAction);
@@ -272,7 +275,7 @@ class FeedbackComponent extends Component<
paddingTop: 10, paddingTop: 10,
paddingBottom: 10, paddingBottom: 10,
}}> }}>
<Row style={{color: 'black', fontSize: 20}}> <Row key="heading" style={{color: 'black', fontSize: 20}}>
{this.state.nextAction === 'finished' {this.state.nextAction === 'finished'
? this.props.promptData.postSubmitHeading ? this.props.promptData.postSubmitHeading
: this.props.promptData.preSubmitHeading} : this.props.promptData.preSubmitHeading}