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.