ReactJs中的警告：数组或迭代器中的每个子代都应具有唯一的“键”属性

Question

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!

Answer 1

Looks like it might just be a typo?

row.push(
  <DepartmentRow key={r.departament} data={r} handleChange={(e) => this.handleChange(e)}/>
);

r.departament -> r.department