Warning: flattenChildren(...): Encountered two children with the same key

Question

Ok, Im building a simple ToDo app for learning purposes, and Im facing a warning that I cannot solve:

When I check the ToDo as Done, the error is thrown. I tried to set the key as the index of each element, the warning stopped, but an duplicated element was rendered when the list updates.

Heres my component:

import React from "react";
import TodoTask from "./TodoTask";

const TodoList = ({todos, onTaskCheck}) => {

    function renderList() {
        return (
            todos.map((todo) => {
                return <TodoTask key={todo.id} todo={todo} onTaskCheck={onTaskCheck} />
            })
        );
    }

    return (
        <div>
            <h1 className="title is-4">ToDo List</h1>
            <ul className="task-list">
                {renderList()}
            </ul>
        </div>
    );
};

export default TodoList;

Heres the reducer:

export default function TodoReducers(state = [], action) {
    switch(action.type) {
        case "LIST_TODOS":
            return [
                {id: 1, description: "Task 1", isCompleted: true},
                {id: 2, description: "Task 2", isCompleted: true},
                {id: 3, description: "Task 3", isCompleted: true},
                {id: 4, description: "Task 4", isCompleted: false},
                {id: 5, description: "Task 5", isCompleted: false}
            ];
        case "CHECK_TODO":
            return [...state, Object.assign({}, action.payload, action.payload.isCompleted = true)];
        default:
            return state;
    }
}

The rest of the code is here (GitHub)

Thanks, and sorry for the bad english!

Answer 1

The problem lies in your reducer. Instead of finding the todo you want to complete and editing its completed-value to be true, you append a copy of said todo to the end of your array. This makes your app try to render all your todos, even though there are to entries with the same id (and same key).
You are doing this:
initial state: [todo1: completed, todo2: not completed, todo3: completed]
eventual state: [todo:1 completed, todo2: not completed, todo3: completed, todo2: completed]
This is not what we want however.

I solved your issue by looping over your todos, finding the one you want to complete and modifying that one.
I added this function in the same file as your reducer (you can implement it however you see fit, of course).

function completeTodo(todos, id) {
  return todos
    .map(
      todo => {
        if (todo.id === id)
          todo.isCompleted = true
        return todo
      }
    )
}

Now you can modify your state in your reducer like so:

   case "CHECK_TODO":
            return completeTodo(state, action.payload.id)

This should do the trick. I also recommend using Immutable.js in your reducers at least. It'd make editing your state simpler a lot of the time. But that's up to you again, of course.