how do I get event.target to return a specific target element?

Question

In my react application I have this button which acts like state switcher this button has an id attribute/prop and this button wraps a font-awesome icon.

<button id={feedId}>
   <i className={isStatus === 'Y' ? 'fa fa-unlock' : 'fa fa-lock'} /> 
   {isStatus === 'Y' ? 'Active' : 'Inactive'}
</button>

Now depending upon where you click on the button the event.target would return the entire button with id or just the icon that's <i> tag how do I make sure that entire button gets return as part of event.target instead of just <i>

Answer 1

You can use currentTarget

 function test(e) { console.log('Target ', e.target); console.log('Current Target ', e.currentTarget) } 

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <button id="test" onclick="test(event)"> <i class="fa fa-quora" aria-hidden="true"></i> Text </button>