React Removing an element from a rendered list

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>
    );
  }

155 thoughts on “React Removing an element from a rendered list”

  1. Pingback: purchase cialis
  2. Pingback: sildenafil online
  3. Pingback: sildenafil 50mg
  4. Pingback: cialis tadalafil
  5. Pingback: sale cialis
  6. Pingback: otc viagra
  7. Pingback: viagra pill
  8. Pingback: Amoxil uk
  9. Pingback: sildenafil coupon
  10. Pingback: viagra otc
  11. Pingback: cheap cialis
  12. Pingback: viagra price
  13. Pingback: cialis 500
  14. Pingback: zithramax anxiety
  15. Pingback: goodrx ventolin
  16. Pingback: tadalafil generico
  17. Pingback: teva viagra
  18. Pingback: viagra connect
  19. Pingback: online viagra
  20. Pingback: homemade viagra
  21. Pingback: what is viagra
  22. Pingback: generic viagra
  23. Pingback: lady viagra
  24. Pingback: red viagra tablets
  25. Pingback: viagra dosages
  26. Pingback: viagra men
  27. Pingback: viagra cock
  28. Pingback: viagra use
  29. Pingback: viagra boys
  30. Pingback: walgreens viagra
  31. Pingback: viagra amazon
  32. Pingback: sildenafil goodrx
  33. Pingback: viagra for sale
  34. Pingback: buy viagra
  35. Pingback: walmart viagra
  36. Pingback: cialis vs viagra

Leave a Comment