how is the correct id sent to onDelete? I am not sending any id in the onClick, so how does the onDelete knows which id is being passed to it?

import React from "react";

function Note(props) {
  
  function handleClick() {
    console.log(props.id);
    props.onDelete(props.id);
  }

  return (
    <div className="note">
      <h1>{props.title}</h1>
      <p>{props.content}</p>
      <button onClick={handleClick}>DELETE</button>
    </div>
  );
}

export default Note;

3 thoughts on “how is the correct id sent to onDelete? I am not sending any id in the onClick, so how does the onDelete knows which id is being passed to it?”

  1. if you send your id of something to the component ‘Note’,

        function Main()
           {
             <Note id={4} />
           }
    

    it will pass to the Note’s props and you can use it that way.

    Reply
  2. Try running this:

    import React from "react";
    function Note(props) {
    
      const handleClick = (id) => {
        console.log(id);
        props.onDelete(id);
      }
    
      return (
    
      <div className="note">
        <h1>{props.title}</h1>
        <p>{props.content}</p>
        <button onClick={handleClick(props.id)}>DELETE</button>
      </div>
      ); 
    }
    
    export default Note;
    Reply

Leave a Comment