I'm having this warning:
Warning: Each child in an array or iterator should have a unique "key" prop, in in DepartmentRow (created by FilterableTable).
This is where DepartmentRow appears in FilterableTable:
showListOfDepartmentsToBeFiltered = () => {
const {
users
} = this.props;
if ( users.length > 0 ) {
let row = [];
users.filter(function(user, index) {
return users.map(item => item.department.trim()).indexOf(user.department.trim()) === index;
}).forEach(r => {
row.push(
<DepartmentRow key={r.departament} data={r} handleChange={(e) => this.handleChange(e)}/>
);
});
return (
<div>
<table className={styles.departmentTable}><tr><thead>Departments</thead></tr>{row}</table>
</div>
);
}
return false;
}
And this is DepartmentRow component:
class DepartmentRow extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<tbody>
<tr>
<td><div><input type="checkbox" name="ListOfDepartments" value={this.props.data.department} onChange={(e)=>this.props.handleChange(e)}/>
<label htmlFor="ListOfDepartments">{this.props.data.department}</label></div>
</td>
</tr>
</tbody>
);
}
}
DepartmentRow.propTypes = {
data: PropTypes.object,
handleChange: PropTypes.func
};
How can I solve it? Thank you!