How to get id of the clicked element from the child to the parent

July 8, 2023

I have one Parent and one child component.
In child i have notes inner elements ,where delete is one of them.

I need upon clicking delete element in child component it should return an ID to the parent element , so that it should be identified to which array element it clicked.

Parent

const Main = () => {

    const notes = [
        {id:1,
         title:"What is React? ",
        content:"React is a JavaScript library that aims to simplify development of visual interfaces.",
        // date:"28/04/2023"
        },
        {
         id:2,
         title:"What is Java?",
         content:"Java is a most popular, object-oriented, widely used programming language and platform that is utilized for Android development, web development, artificial intelligence, cloud applications, and much more.",
        //  date:"28/04/2023"
        }
    ]
    const [mynote, setNote] = useState(notes);
    const [isActive,setisActive] = useState([]);
    
     const navActive = () =>{
       setisNav(curr => !curr);
      }
  

  return (
    <div className='main'>

     <div className={`leftnote`}>
        
     <div className={`notesdiv`}>
      <div className={`notes`} >
      { 
        mynote.map((obj)=>{
            return( <div  key={obj.id}  onClick={() => handleClick(obj.id)} className={`notes ${isActive === obj.id ? 'active':'inactive'}`}>
            <Notes notetitle = {obj.title} notedate={obj.date} />
            </div>    
            )
        })     
      } 
      </div> 
      </div> 

     </div>
     
     </div>
   }

Child

import React from 'react';
import './Notes.css';
import note from './images/note.png';
import del from './images/delete.png';


const Notes = ({notetitle,notedate}) => {
   
  return (
      <div className="note">
      <div className="div1">
      <div className="noteimg">
        <img src={note} alt="note" />
      </div>
       <div className="notemain">
           <h2>{notetitle}</h2>
           <h3>{notedate}</h3>
    </div>
    </div>
    <div className="div2">
    <div className="delimg">
        <img src={del} alt="delete" />
    </div>
    </div>
      </div>
  )
}

export default Notes

Please help me with the above problem.

>Solution :

To achieve this, you can pass the function as a prop to the child. So, your function with logic to delete or any other action with the id of child should be defined in the parent component and should be passed to the child as a prop which will be called from the child component.