Roact Handler Help

So I’ve never really made a scripting support topic before, but this has been very confusing.

I have this Character Customization module which basically returns a stateful component. The problem is I want to unmount the handler inside of the module itself. If you look at Line 241 for the component module, you will see that I am trying to connect a function to MouseButton1Click event. Basically after the done button is pressed, it is supposed to unmount the UI. The problem is I need the handler which gets returned after I create the component.


local Customization = require(SharedModules.UI.CharacterCustomization)
local handler = Roact.mount(Roact.createElement(Customization), PlayerGui, "Customization")
-- I need the handler so I can pass it to Roact.unmount(handler)
-- I only want to unmount after the done button as been pressed, but the component module does not know where the handler is. 

Customization Component Module:

I used BindableEvents but it seems like I can’t pass it as prop in a stateful component which makes this hard. I feel like I am missing something very obvious, but I am not sure.

MouseButton1Click events can only be fired through the client. Does your script run on the server or the client?

This runs on the Client. I am using Roact. My problem isn’t the event being fired, it’s retrieving the handler within the module which is returned after the component is created.

So I’m just going to put the solution I got from LPGhatguy here in case anyone has this problem in the future.

local handle
local function unmount()

handle = Roact.mount(Roact.createElement(App, { unmount = unmount }))

Basically, you create an undefined variable which later gets assigned to the handle. Create a callback function to unmount the handle and finally pass it as a prop.