Deleting todolist tags on ReactJs

When I write sth inside the input then click on the add, i add new li tag to underneath.But my problem is to delete this li tags. I added to fontawesome icon a handleDelete onclick event. But i could not solve how to delete this. I added bind, and handleDelete function on parent component but it does not work. Please help me.

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import React, { Component } from 'react';
import { findRenderedDOMComponentWithClass } from 'react-dom/test-utils';

class MyToDo extends Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleInput = this.handleInput.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleInput(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();

    const old = {
      text: this.state.text,
      id: Date.now(),
    };
    if (this.state.text === '') {
      return;
    }

    this.setState({ items: this.state.items.concat(old), text: '' });
  }






  render() {

    return (
      <div className="text-center mt-5">
        <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <input
              placeholder="Enter todo"
              className="p-3"
              onChange={this.handleInput}
            />
          </div>

          <button type="submit" className="btn btn-primary mt-3">
            ADD
          </button>
        </form>
        <Index items={this.state.items} />
      </div>
    );
  }
}

export default MyToDo;

class Index extends Component {
  constructor(props) {
    super(props);
    
    
  }

  handleDelete(e){
    e.preventDefault()
    this.setState({ text: e.target.value });

  }

  render() {
 

    return (
      <div>
        {this.props.items.map((e) => (
          <div
            className="table-responsive mt-1 d-flex justify-content-center"
            key={e.id}
          >
            <table className="table table-dark w-50 text-center mb-0">
              <tbody>
                <tr>
                  <th scope="row">
                    {e.text}
                    <i
                    onClick={this.handleDelete}
                      className="fas fa-window-close fa-2x float-end bg-danger"
                    ></i>
                  </th>
                </tr>
              </tbody>
            </table>
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<MyToDo />, document.getElementById('root'));

You should pass delete handler from the parent component to the child and call it on delete button click: https://codepen.io/jenovs/pen/RwKxaEE?editors=0010

1 Like
 handleDelete = (id) => {
    this.setState({ items: this.state.items.filter((item) => item.id !== id) });
  };

why did you send id inside the handleDelete?

How else would you know which item to delete?

yes of cource id is unique for elements.But I dont understand how does this function work?

  const items = this.state.items.filter(item => item.id !== id);

what does item.id and id diffence ?

It’s a standard JS array filter function: Array.prototype.filter() - JavaScript | MDN

It goes through an array and runs supplied function, and if that function returns truthy value the element is kept in the array, and removed if the function returns falsy value.

So this function will return true for every value except when the array item id is equal to supplied id.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.