How does Instagram know which button you clicked without having an ID or Name of the button?

A very random question, I just looked at instagram and when you click that 3 dots on the feed on a following user post, you have multiple options: https://i.stack.imgur.com/oDUXA.png

I looked like everyone does, on inspect element and I see that for every button is the same className.

So, how did they know that I’ve clicked on button ‘Go to post’ for example?

A example code is this:

<button class="testButtonClass">Report this user</button>
<button class="testButtonClass">Go to user profile</button>
<button class="testButtonClass">Cancel</button>

I mean they sure use javascript to know which button was clicked, so how can I know that he clicked ‘Go to user profile’ ?

Btw, using name (example below), it will be more easy, right?

<button class="testButtonClass" name="reportUser">Report this user</button>
<button class="testButtonClass" name="viewUserProfile">Go to user profile</button>
<button class="testButtonClass" name="cancelBtn">Cancel</button>

Answer

Instagram uses React JS, which allows you to bind functions without getting a reference to them by ID or class. If you open Instagram on chrome with the React Developer Tools extension, you can actually see it uses that.

If you inspect, select the button you want to check, and click Event Listeners, you can actually see the click event and what happens when it is fired.

Advertisement

Answer