Roact Component doesn't render children

Help and Feedback Scripting Support
, , ,
#1

I created two Roact components, one is the base, and the another component is a custom one, which inherits the base.

-- base
function UIComponents.ButtonBase(props)
    return Roact.createElement("ImageLabel", {
        Size = props.elementSize,
        ImageColor3 = props.imageColor3,
        Image = "rbxassetid://3570695787",
        BackgroundTransparency = 1,

        ScaleType = props.scaleType,
        SliceCenter = props.sliceCenter,
        SliceScale = props.sliceScale,
    })
end

--custom component
function UIComponents.StyleButton(props)
    return Roact.createElement(UIComponents.ButtonBase, props, {
        HotkeyLabel = Roact.createElement("TextLabel", {
            Text = "test",
            TextScaled = true,
        }),
    })
end

The problem is that, when I try to render the UIComponents.StyleButton, its children doesn’t get created.
No output error, I tried searching the docs and forum but couldn’t find a solution. I think it has something to do with the inheritance thing. Can somebody help me with this?

#3

You can’t bump a topic that is 30 minutes old. Give it some time. I am thinking of an answer. You must be patient. Maybe bump after a week is acceptable but 30 minutes is not.

#4

A bit late but if you’re still having trouble, it’s because you never actually rendered HotkeyLabel, you only passed it to ButtonBase as a prop. In ButtonBase, you can tell it explicitly where to render the passed in children with props[Roact.Children]

function UIComponents.ButtonBase(props)
    return Roact.createElement("ImageLabel", {
        Size = props.elementSize,
        ImageColor3 = props.imageColor3,
        Image = "rbxassetid://3570695787",
        BackgroundTransparency = 1,

        ScaleType = props.scaleType,
        SliceCenter = props.sliceCenter,
        SliceScale = props.sliceScale,
    }, props[Roact.Children])
end
3 Likes