I want to capture the onClick event and get the id value of a row

Technical Questions
1

I want to capture the onClick event and get the id value of a row

Builder content link
Builder.io: Visual Development Platform

Builder public api key
8102a91244d54f29aa0462cc10eafd1e

What are you trying to accomplish
I want to capture the onClick event and get the id value of a row, then use that id to show or hide a box displaying detailed information about the product.

Screenshots or video link

1
11472×636 49.3 KB

2
21457×680 58.2 KB

image
image927×695 95.7 KB

2

Hello @Kenz,

You can capture the id value of row using the builder state and action

Action handlers introduce an additional object you can access: event.

This event object represents the HTML event triggered by the selected action. You can leverage event to access the event’s target element or invoke methods such as preventDefault or stopPropagation:

// access the value attribute (ie from an input)
// and store it in builder state
state.someStateProp = event.currentTarget.value;

// if you have a link with an href, you might want to stop
// default browser navigation and handle this yourself
event.preventDefault();
var targetElementId = event.currentTarget.id;
var elementToHide = document.getElementById(targetElementId);
elementToHide.style.display = 'none';

For reference, please refer to the below links