Не работает редактирование, как решить?

Question

Никита @SonyFan23

React

Не работает редактирование, как решить?

Хочу добавить в todo app функцию редактирования, но при изменении заметки приходит undefined.

Вот action creater:

export const changeTodo = (id, text) => {
  debugger
  return {
    type: CHANGE_TODO,
    id,
    text
  }
}

Вот Reducer:

case CHANGE_TODO: 
    debugger
      return {
        ...state,
        todos: state.todos.map(todo => todo.id === action.id
          ? { ...todo, id: todo.id, text: action.text, completed: todo.completed }
          : todo
        )
      }

Проблема в том, что я не передаю параметр (в котором будет значение) в компонент Todo, а если я использую args, то интерпретатор ругается.
Подскажите, как можно решить эту проблему.
Все приложения на github: GitHub

const TodoList = ({removeTodo, toggleTodo, changeTodo, todos}) => {
  return (
    <StyledTodoList>
      <Ul>
        {
          todos.map(todo => 
            <Todo
            key={todo.id}
            toggleHandler={() => toggleTodo(todo.id)}
            removeHandler={() => removeTodo(todo.id)}
            сhangeHandler={() => changeTodo(todo.id)}
            // для для изменения заметки нужно добавит еще один параметр, который будет новым значением
            {...todo}
            />
          )
        }
      </Ul>
      <AddButton>
        <NavLink 
        to='addTodo'
        >+</NavLink>
      </AddButton>
    </StyledTodoList>
  )
}

И Todo:

const Todo = props => {

  const { id, text, toggleHandler, removeHandler, сhangeHandler} = props
  const [isEditingStarted, setEditValue] = useState(false)
  const [inputValue, setInputValue] = useState('')

  const submitHandler = event => {
    event.preventDefault()
    сhangeHandler(id, inputValue)
    setInputValue('')
  }

  return (
    <StyledTodo {...props}>
      <StyledCheckBox
        type='checkbox'
        onClick={toggleHandler}
      />
      {isEditingStarted ? 
      <form onSubmit={submitHandler}>
        <Input 
        defaultValue={text}
        onChange={e => setInputValue(e.target.value)}
        onKeyDown = {e => e.keyCode === 27 ? setEditValue(false) : ''}
        /> 
      </form> :
      text
      }
      <div>
        <Span 
         onClick={() => setEditValue(true)}
         >
          <img 
          src={changeIcon} 
          alt='Ред'
          />
        </Span>
        <Span
          onClick={removeHandler}
        >
          <img 
          src={closeIcon} 
          alt='Закрыть'
          />
        </Span>
      </div>
    </StyledTodo>
  )
}