Roact tabbing system

Help and Feedback Scripting Support
#1

I’m trying to make a tabbing system in Roact where the user can create new tabs.

I’m pretty sure I’m supposed to use bindings for this. The binding stores a list of tab data. But whenever I update the binding, it doesn’t rerender the component that shows the tabs.

This is the code that creates the binding, and the function that gets ran whenever a new tab should get created:

local openTabs, updateOpenTabs = Roact.createBinding({})

local function openTab(tabData)
	local val = openTabs:getValue()
	table.insert(val, tabData)
	updateOpenTabs(val)
end

This is the code that renders the tabs:

function Tabs:render()
	local props = self.props
	local tabs = props.Tabs:getValue() -- openTabs binding

	local tabChildren = {
		Roact.createElement("UIListLayout", {
			-- properties...
		}),
	}

	-- generate tab instances
	for _, tabData in ipairs(tabs) do
		table.insert(tabChildren, Roact.createElement("TextButton", {
			-- properties...
		}))
	end

	return Roact.createElement("Frame", {
		-- properties...
	}, tabChildren)
end

My code doesn’t error. It just runs the openTab function, and inserts a tab into the binding’s list, but doesn’t rerender the tabs component.