How to render child components in Roact (TS)?

Help and Feedback Scripting Support
, , ,
#1

I am using TypeScript with roact to create my UI and I have found to be much more efficient with it. However, I have come to a problem where I am unable to render any children in Roact.

I have a component which is just supposed to be an empty frame, but it will not let me add any children to it.

layout.tsx

import Roact from "@rbxts/roact";

import EmptyFrame from "../global/EmptyFrame";
import CustomButton from "./Components/CustomButton";
import CustomLabel from "./Components/CustomLabel";

function createLayout(texts: Map<string, Callback>, title: string, bottom: string) {
    return (
        <screengui ResetOnSpawn={ false }>
                <EmptyFrame Size={ new UDim2(0.3, 0, 0.8, 0) } Position={ new UDim2(0.05, 0, 0.1, 0) } Key="Debug1">
                    <>
                        <CustomLabel Font={ Enum.Font.SourceSans } Size={ new UDim2(1, 0, 0.25, 0) } Text={ title } TextSize={ 110 }/>
                        <EmptyFrame Key="Debug2">
                                <uilistlayout/>
                                {(() => {
                                    let elements: Array<Roact.Element> = new Array<Roact.Element>();

                                    texts.forEach((call, text) => {
                                        elements.push(<CustomButton Font={ Enum.Font.SourceSansLight } OnClick={ call } Size={ new UDim2(1, 0, 0.2, 0) }
                                        Text={ text } TextSize={ 72 }/>)
                                    })

                                    return elements
                                })()}
                        </EmptyFrame>
                    </>
                </EmptyFrame>
        </screengui>
    )
}

// Create menu
export default createLayout;

I have very limited knowledge with both typescript and roact, but I cannot find why it will not render the second EmptyFrame or CustomLabel inside of the first EmptyFrame.

In PlayerGui, it only shows the first EmptyFrame component.
image

I feel like im missing something very simple, but I do not know what.

#2

I am still having this issue. On a similar post I made previously, I was recommended to use fragments and to render child components, but I cannot find any documentation on how to render child components

#3

Finally found how to do it. Inside the .tsx, you can get the children with this syntax:
{ this.props[Roact.Children] }
The syntax is a bit weird (I would’ve preferred this.props.children, but at least it works now). I changed the implimentation of EmptyFrame:

// Empty frame for easy parenting

import Roact from "@rbxts/roact";


interface IProps {
    Size?: UDim2 | undefined
    Position?: UDim2 | undefined
    AnchorPoint?: Vector2 | undefined
}


class EmptyFrame extends Roact.Component<IProps> {
    render() {
        return (
            <frame
                AnchorPoint={ this.props.AnchorPoint }
                Size={ this.props.Size || new UDim2(1, 0, 1, 0) }
                Position={ this.props.Position }
                Transparency={ 1 }
                BorderSizePixel={ 0 }
            >
                <>
                    { this.props[Roact.Children] }
                </>
            </frame>
        )
    }
}

export default EmptyFrame;
3 Likes