Как добавить функцию кнопки удаления в таблицу ReacJst?

Question

Я пытаюсь реализовать функцию удаления в таблице приложения TODOS, но я использую эту функцию для динамической визуализации строк. Данные поступают с локального сервера и локальной базы данных. Он создает идеальную таблицу, но не может получить функцию удаления, я считаю, что причина в том, что я использую функцию снаружи, но я попытался поместить функцию внутри класса, все еще не работает.

Как Могу ли я реализовать функцию удаления для каждой строки в соответствии с кодом?

Любые предложения будут оценены. Спасибо

import React, {Component} from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import Delete from './delete.jsx'



const Todo = props => (
    <tr>
        <td className={props.todo.todo_completed ? 'completed': ''}>
            <div class="card" ><div class="card-body">{props.todo.todo_description}
            </div></div></td>
        <td className={props.todo.todo_completed ? 'completed': ''}>
                <div class="card"><div class="card-body">
                {props.todo.todo_responsible}
                </div></div></td>
        <td className={props.todo.todo_completed ? 'completed': '' } >
                <div class="card" id="priority"><div class="card-body">
                {props.todo.todo_priority}
                </div></div></td>
        <td>

            <Link to={"/edit/"+ props.todo._id}><div class="card"><div class="card-body">
            <a class="icon  fa fa-edit" id="uno" style={{}}></a>
            
                </div></div>
                </Link>
               
    
           
        </td>
        <td>
{/* 
        <div className="remove">
            <a href="#" onClick={() => remove(id)}>X</a>
        </div>
                 */}


        </td>

        
        <td>
                 <label style={{paddingLeft: "7px"}}>
                <input type="checkbox" />
                <span></span>
                </label>
            
            </td>
    </tr>
)


class TodoList extends Component {
    constructor(props){
        super(props);
        this.state ={todos: []};
    }

    componentDidMount(){
        axios.get('http://localhost:3000/todos/')
        .then(response => {
            this.setState({todos: response.data});
        })
        .catch(
            function(error){
                console.log(error)
            }
        )

    }

    componentDidUpdate(){
        axios.get('http://localhost:3000/todos/')
        .then(response => {
            this.setState({todos: response.data});
        })
        .catch(
            function(error){
                console.log(error)
            }
        )
    }
     onChangeTodoCompleted(e) {
        this.setState({
            todo_completed: !this.state.todo_completed
        });
    }
    

    todoList() {
        return this.state.todos.map(function(currentTodo, i){
            
           return <Todo todo = {currentTodo} key={i}/>  
        });
    }

    render (){
        return(
            <div className="table-div" >
               <h3>.............Things to do :D................</h3>
               <table  style={{marginTop: 20}}>
               <thead>
                   <tr>
                      
                       <th>Description</th>
                       <th>Responsible</th>
                       <th>Priority</th>
                       <th>Actions</th>
                       
                   </tr>
               </thead>
               <tbody>
                   {this.todoList()}
               </tbody>
               </table>
            </div>
           
        )
    }
}
export default TodoList;

Answer 1

Добавить метод удаления в TodoList и передать через Todo компонент:

remove(index) {
    const todos = this.state.todos;
    todos.splice(index, 1);
    this.setState({todos});
}

...

todoList() {
    return this.state.todos.map(function(currentTodo, i){
        
       return <Todo todo = {currentTodo} key={i} remove={remove}/>  
    });
}

В компоненте Todo:

<div className="remove">
    <button onClick={() => props.remove(props.key)}>X</button>
</div>

Answer 2

Кнопка "Попробовать" с onClick = {this.delete (id)}