i have tried to remove todo task from my state array but its not working for me. i am having hard time using deletHandle function in Todolist.js. how can i use key from state to indentify and delete clicked(or perticular) todo task

App.js

import React from 'react';
import { Form } from './components/todo-Form/Form.component';
import { Todolist } from './components/Todolist/Todolist.component';
import './App.css';


class App extends React.Component {
  constructor() {
    super();

    this.state = {
      todo: [],
      do: ""
    }
  }

  render() {
    const handleChange = e => {
      this.setState({ do: e.target.value }/*, () => { console.log(e) }*/);
    };

    const submitHandler = e => {
      e.preventDefault();
      if (this.state.do != "" ) {
        this.setState({ todo: [...this.state.todo, { task: this.state.do, id: Math.random() * 1000 }], do: "" }/*, () => { console.log(this.state.todo) }*/)
      }
    }

    const deletHandler = key => {
      this.setState({
        todo: this.state.todo.filter(el => el !== key)
    })
    }


    return (
      <div className="App">
        <header>
          <h1>ToDo List</h1>
        </header>
        <Form handleChange={handleChange} submitHandler={submitHandler} inputText={this.state.do} />
        <Todolist check={this.state.todo} deletHandler={deletHandler}/>
      </div>
    )
  }
}

export default App;

Todolist.js

import React from "react";
import { Todo } from "../Todo/Todo.component";
import "./todolist.style.css"


export const Todolist = ({check, deletHandler}) => {
    return <div >
            <ul className="todo-list">
                {check.map(todo => (<Todo task={todo.task} key={todo.id} onClick={() => {deletHandler(todo.id)}}/>))}
            </ul>
          </div>;
  };        

Todo.js

import React from "react";
import "./todo.style.css";

export const Todo = ({task}) =>{
    return (
    <div className="todo-container"  >
        <li className="todo">
        <h2> {task} </h2> 
        <ul className="delet-x">X</ul>
        </li> 
    </div>)
}

CodePudding user response：

In your delete handler, you have to use the id to delete

const deletHandler = (key) => {
    this.setState({
        todo: this.state.todo.filter((el) => el.id !== key),
    });
};

CodePudding user response：

You need move the handler methods from render function to class members.

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      todo: [],
      do: "",
    };
  }

  handleChange = (e) => {
    this.setState({ do: e.target.value } /*, () => { console.log(e) }*/);
  };

  submitHandler = (e) => {
    e.preventDefault();
    if (this.state.do != "") {
      this.setState(
        {
          todo: [
            ...this.state.todo,
            { task: this.state.do, id: Math.random() * 1000 },
          ],
          do: "",
        } /*, () => { console.log(this.state.todo) }*/
      );
    }
  };

  deletHandler = (key) => {
    this.setState({
      todo: this.state.todo.filter((el) => el !== key),
    });
  };

  render() {
    return (
      <div className="App">
        <header>
          <h1>ToDo List</h1>
        </header>
        <Form
          handleChange={handleChange}
          submitHandler={submitHandler}
          inputText={this.state.do}
        />
        <Todolist check={this.state.todo} deletHandler={deletHandler} />
      </div>
    );
  }
}

export default App;