React Removing an element from a rendered list

by

I am practicing stuffs in react js like, updating array, removing an array by doing onClick. I’ve followed some solutions but I didn’t get clear idea to achieve to remove an item from an rendered list. I’m having two components ‘todoform’ and ‘todolist’. All the logics are in ‘todoform’ , I’m rendering the array with help of map in ‘todolist’. I didn’t able to get ID of the clicked element. Could any one able to correct me , that what I am doing wrong in below code. Thanks in advance.

TododForm:

constructor(props) {
    super(props);
    this.state = {
      InputValue: "",
      todos: [],
    };
    console.log("intialvalue", this.state.InputValue);
  }

  handleChange(e) {
    this.setState({ InputValue: e.target.value });
  }



  handleSubmit(e) {
    e.preventDefault();
    this.setState({
      todos: [
        ...this.state.todos,
        {
          text: this.state.InputValue,
          completed: false,
          id: Math.random() * 1000,
        },
      ],
    });
    this.setState({ InputValue: "" });
  }

  deleteHnadler = () => {
    // console.log("im ckicked", e);
    const rem = this.state.todos.filter((el) => el.id !== this.state.todos.id);
    console.log("object", rem);

    // this.setState({ todos: rem });
  };

  render() {
    return (
      <div className="Todo">
        <form>
          <input
            type="text"
            value={this.state.InputValue}
            onChange={this.handleChange.bind(this)}
          ></input>
          <button onClick={this.handleSubmit.bind(this)}>Add</button>
        </form>
        <p>{this.state.InputValue}</p>
        <TodoList todos={this.state.todos} clickMe={this.deleteHnadler} />
      </div>
    );
  }

Todolost.js
 clickMe = () => {
    this.props.clickMe();
  };

  render() {
    return (
      <div>
        {this.props.todos.map((todo) => (
          <li key={todo.id} todo={todo}>
            {todo.text}
            <button>Completed</button>
            <button onClick={this.clickMe}>Delete</button>
          </li>
        ))}
      </div>
    );
  }