您的代码中存在几个问题。

1. 类定义

使用类组件

class TodoItem extends React.Component {
}

或函数组件

const TodoItem = ({...}) => {
 return (
   <li>
    ...
   </li>
 )
}

函数组件必须以不同的方式编写，并且没有 this 对象。所以也许先使用类组件

2. DeleteItem 方法

常识是在开头使用小字符，所以 deleteItem 但这不是问题。标准方法不受此约束，因此您必须手动执行

<span className="item-delete" onClick={this.DeleteItem.bind(this)}>X</span>

更好且更简单的解决方案是使用箭头函数，它将自动绑定。

DeleteItem = () => {
    console.log(this); //trying to log the item outputs undefined
    this.props.onDelete(this.props.item);
  }

您未在构造函数内绑定 this.onDelete 和 this.DeleteItem 。您可以为各自的 2 个组件执行 this.onDelete = this.onDelete.bind(this); 和 this.DeleteItem = this.DeleteItem.bind(this); 。请参考以下代码

var El2 = class App extends React.Component {
  constructor(props) {
    //constructor
    super(props);
    this.state = {
      todos: ["work out", "eat breakfast", "take a shower"]
    };
    this.onDelete = this.onDelete.bind(this);
  }

  /**********methods**********/

  onDelete(item) {
    console.log(item, this.state.todos);
    let updatedTodos = this.state.todos.filter((val, index) => {
      return item !== val;
    });
    this.setState({ todos: updatedTodos });
  }

  /********rendering method*******/

  render() {
    let todos = this.state.todos;
    todos = todos.map((item, index) => {
      return <TodoItem item={item} key={index} onDelete={this.onDelete} />;
    });

    return (
      //works kinda like a main function
      <div id="todo-list">
        <p>the busiest people have the most leisure...</p>
        <ul>{todos}</ul>
      </div>
    );
  } //component rendering
}

var TodoItem = class App extends React.Component {
  constructor(props) {
    super(props);
    this.DeleteItem = this.DeleteItem.bind(this);
  }

  DeleteItem() {
    console.log(this.props); //trying to log the item outputs undefined
    this.props.onDelete(this.props.item);
  }

  render() {
    return (
      <li>
        <div className="todo-item">
          <span className="item-name">{this.props.item}</span>
          <span className="item-delete" onClick={this.DeleteItem}>
            X
          </span>
        </div>
      </li>
    );
  }
};

您需要查看有关 porps 和组件的更多信息 https://pt-br.reactjs.org/docs/components-and-props.html

我也建议不要创建这样的类。 今天，react 建议制作函数组件。

像这样：

import React, { useEffect, useState } from "react";

function App(){

const [todos, setTodos] = useState("");           ** hooks to create state**

 useEffect(() => {
                                        ** acess life cicle 
  }, [todos])                           **in this array is variable react obrseve to update**

----heres come your functions ------

return(
   <div id="todo-list"> 
    <p>the busiest people have the most leisure...</p>
    <ul>{todos}</ul>
  </div>
){

 }
}
´´´´
See in documentation about hook in link 
<https://pt-br.reactjs.org/docs/hooks-intro.html> 
has an example similar to what you are trying to do. 
I went a little far in explaining it but I believe it is useful.

I hope I helped.