Fix react ‘key’ error

This commit is contained in:
emizzle 2018-08-13 23:28:17 +10:00 committed by Pascal Precht
parent dba61ed382
commit 950f285d2e
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
2 changed files with 7 additions and 6 deletions

View File

@ -2,14 +2,14 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {Badge} from 'tabler-react'; import {Badge} from 'tabler-react';
const CompilerError = ({key, onClick, errorType, row, errorMessage}) => ( const CompilerError = ({ index, onClick, errorType, row, errorMessage}) => (
<a <a
href="#editor" href="#editor"
className="list-group-item list-group-item-action" className="list-group-item list-group-item-action"
onClick={onClick} onClick={onClick}
key={key} key={index}
> >
<Badge color={errorType === "error" ? "danger" : errorType} className="mr-1" key={key}> <Badge color={errorType === "error" ? "danger" : errorType} className="mr-1" key={index}>
Line {row} Line {row}
</Badge> </Badge>
{errorMessage} {errorMessage}
@ -17,10 +17,10 @@ const CompilerError = ({key, onClick, errorType, row, errorMessage}) => (
); );
CompilerError.propTypes = { CompilerError.propTypes = {
key: PropTypes.string, index: PropTypes.number,
onClick: PropTypes.func, onClick: PropTypes.func,
errorType: PropTypes.string, errorType: PropTypes.string,
row: PropTypes.number, row: PropTypes.string,
errorMessage: PropTypes.string errorMessage: PropTypes.string
}; };

View File

@ -48,7 +48,8 @@ class FiddleContainer extends Component {
node: node:
<CompilerError <CompilerError
onClick={(e) => { this._onErrorClick(e, annotation); }} onClick={(e) => { this._onErrorClick(e, annotation); }}
key={index} key={`${errorType}_${index}`}
index={index}
errorType={errorType} errorType={errorType}
row={errorRowCol.row} row={errorRowCol.row}
errorMessage={error.formattedMessage}/>, errorMessage={error.formattedMessage}/>,