Не понимаю в чём дело, ошибка ts(2322)

{props.tasks.map((t) => {
          const onChangeTitle = (value: string) => {
            props.onChangeTitle(t.id, value, props.id);
          };

          return (
            <li key={t.id} className={t.isDone === true ? "is-done" : ""}>
              <input
                type="checkbox"
                onChange={(e) =>
                  props.changeCheckbox(t.id, e.currentTarget.checked, props.id)
                }
                checked={t.isDone}
              />
              <EditableSpan title={t.title} onChange={onChangeTitle} />
              <button onClick={() => props.removeItem(t.id, props.id)}>
                x
              </button>
            </li>
          );
        })}

в onChange в EditableSpan вылазит ошибка: Type '{ title: string; onChange: (value: string) => void; }' is not assignable to type 'IntrinsicAttributes & EditableSpanPropsType'. Property 'onChange' does not exist on type 'IntrinsicAttributes & EditableSpanPropsType'.

А вот и сам EditableSpan:

type EditableSpanPropsType = {
  title: string;
  onChangeTitle: (value: string) => void;
};

function EditableSpan(props: EditableSpanPropsType) {
  const [editmode, setEditMode] = useState(false);
  const [title, setTitle] = useState(props.title);

  const activateEditMode = () => {
    setEditMode(true);
    setTitle(props.title);
  };
  const activateViewMode = () => {
    setEditMode(false);
    props.onChangeTitle(title);
  };
  const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
    setTitle(e.currentTarget.value);
  };

  return editmode ? (
    <input
      type="text"
      value={title}
      onChange={onChangeHandler}
      onBlur={activateViewMode}
      autoFocus
    />
  ) : (
    <span onDoubleClick={activateEditMode}>{props.title}</span>
  );
}

Ответы (1 шт):

Автор решения: Randall

В компонент EditableSpan вы передаете атрибут onChange вместо onChangeTitle.

Тут есть два решения.


Тип EditableSpanPropsType нужно поменять.

type EditableSpanPropsType = {
  title: string;
  onChangeTitle: (value: string) => void;
};

Вот так.

type EditableSpanPropsType = {
  title: string;
  onChange: (value: string) => void;
};

Второе решение.

Вместо onChange передаете onChangeTitle.

<EditableSpan title={t.title} onChangeTitle={onChangeTitle} />
→ Ссылка