如何将子组件中的{todo.id}发送到父组件的处理程序？

Question

I am able to confirm that my handler is receiving the event, but I want to be able to refer to the actual key={todo.id} , (or just the {todo} ), that my anchor tag is attached to inside the handler, because I want this as a reference to set my state. Can someone please tell me how I would do this?

import React from 'react';

const Todo = props => (
    <div>
       <ul className = "list-group">
       {props.todos.map(todo => {
          return <li className = "list-group-item" key ={todo.id}>{todo.text}<a onClick={props.onDelete}
          className="glyphicon glyphicon-trash" href="#"></a></li>
         })
        }
       </ul>
    </div>
);

export default Todo;

That's the child where you can see key={todo.id} as well as the {props.onDelete} handler ^^^.

I then have this handler in my parent component, so how can I refer to it inside this handler?:

handleDelete(){
    console.log();

  }

Thanks for your help in advance!

Answer 1

You could eg create a new inlined arrow function for each todo and pass the todo as argument to onDelete that way:

<a
  onClick={() => props.onDelete(todo)}
  className="glyphicon glyphicon-trash"
  href="#"
/>

If you don't want to create a new function for each todo in each render, you could put the todo.id in a data attribute:

<a
  onClick={props.onDelete}
  className="glyphicon glyphicon-trash"
  href="#"
  data-id={todo.id}
/>

// ...

handleDelete(event) {
  const todoId = event.target.dataset.id;
  console.log(todoId);
}