How to access the button information in registered custom react component from Builder and pass the onclick callback of the button from builder?

Have registered a custom react component (with a button inside it) from NextJS app into Builder. Now I want to access the button data(attributes) and pass an onclick callback from this component from App to Builder editor and use that button details inside that callback in the editor.

Thanks.

@builder_support Any help here?

Hey @dharmaraju, depending on what you are looking to do there are a few options.

So it sounds like what you want is to just access a data attribute on the button within the component, correct? In that case, you could just add a click event within Builder to the custom component element that includes logic to check for the specific data attribute and then add it to state as needed. So if you added a custom action to the component within Builder, you could have something like:

if (event.target.dataset.whateverValue) {
  state.value = event.target.dataset.whateverValue;
}

Screen Shot 2022-03-07 at 9.57.28 AM

Notice, you would want to use the ‘event’ object available to you in the Action’s custom code editor. Is that sufficient for what you are looking to do?

Let me know, and if not any further context would be helpful to figure out a better solution!

@TimG thanks for the answer. Actually we have a few custom react components (with buttons inside them) created in the NextJS codebase out of builder and registered in builder. Main thing is to do something in the onclick function of the button within the builder.

Hi @dharmaraju understood, I see you started another thread here:

Let me know if there is anything I missed otherwise we can continue the conversation there!