-2
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;
prasanth
  • 22,145
  • 4
  • 29
  • 53
Kunal Arora
  • 1
  • 1
  • Does this answer your question? [What is a 'Closure'?](https://stackoverflow.com/questions/36636/what-is-a-closure) – Martin Feb 16 '21 at 09:58

3 Answers3

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.

this may be the correct usage based on your app but if you have much components to send you better do it this way,

const noteProps = {...your props}
    function Main()
       {
         <Note noteProps={noteProps} />
       }
function Note({noteProps})
       {
         //you can use it this way: noteProps.id
         function handleClick() {
           console.log(noteProps.id);
           props.onDelete(noteProps.id);
         }
       }

and a different approach would be,

function App()
       {
         <Note id={5} someOtherProp={true} />
       }
function Note({id, someOtherProp})
       {
         //you can use it this way: id, someOtherProp
         function handleClick() {
           console.log(id);
           props.onDelete(id);
         }
       }
euler
  • 89
  • 6
  • Hi, thanks for the reply.I am sending the id from the main component and using it through props in Note. My question is suppose there are 4 of these Note component and I am pressing delete button in one of those components. How does the props.id sends the right id which is to be deleted and not the id of any other note component? How can props.id fetch me the id of the component on which delete is pressed? – Kunal Arora Feb 16 '21 at 12:17
  • When the first time your code is rendered, all of your props that you send to the 'Note' component going thru the 'Note' component as it's parameters. When you click a delete button, react will render the related component's again(you can check this with console logs or debugging) and will know what exactly did you send to each 'Note' component. You don't have to worry about what you sent to the component's, they will never gonna be disappear unless you want it to – euler Feb 16 '21 at 12:39
-1

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;
Hussain Mustafa
  • 7
  • 5
  • this handleClick function runs on render.you have to define it like this: – Ehsan Feb 16 '21 at 10:01
  • @Ehsan I think you are mistaken my friend, you require this method when your function is like this function handleClick(){...} but see what i did there. – Hussain Mustafa Feb 16 '21 at 10:44
  • it does not relate on how you define function.the one you defined in button is an immediate function. it runs on mount . whenever you pass an argument you should define it like – Ehsan Feb 16 '21 at 10:49
-1

You have to pass id from its parent. that's how it knows which id is.

Ehsan
  • 188
  • 12