Roact Component is not working

Help and Feedback Scripting Support
, , ,
#1

Today, I wanted to see if I was able to create a Component without having to use another module script, but it seems like this isn’t working, is there any way to fix this.

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")
local Roact = require(ReplicatedStorage:FindFirstChild("ModuleScripts").Roact)


local function CreateBlankFrame()
	local BlankFrame = Roact.Component:extend("BlankFrame")
	
	function BlankFrame:render()
		return Roact.createElement("Frame",{
			BackgroundTransparency = 0;
			BackgroundColor3 = Color3.fromRGB(0,0,0);
			Size = UDim2.new(1,0,1,0);
			Visible = true;
			ZIndex = self.props.ZIndex;
		})
	end
	
	return BlankFrame
end


local TestingGui = Roact.createElement("ScreenGui",{
	ReallyCoolFrame = Roact.createElement(CreateBlankFrame(),{
		ZIndex = 30;
		
	});
})

local LocalPlayer = Players.LocalPlayer or Players.PlayerAdded:Wait()
local PlayerGui = LocalPlayer:FindFirstChildWhichIsA("PlayerGui")

if PlayerGui then
	Roact.mount(TestingGui,PlayerGui)
end
#2

Why are you trying to do everything in a single script? Separate them

#3

Depending on where the script is, this is going to return nil, as it isn’t waiting for it to be added (StarterGui is where it doesn’t happen).

It’s then checking if it isn’t nil, and if it isn’t, mounts the UI; which is never since it’ll always return nil.
So the fix is just to change that line to:

local PlayerGui = LocalPlayer:WaitForChild("PlayerGui")

It’ll wait for the PlayerGui to be added before executing more code, and thus it’ll exist for the code inside the if statement to be run. (^ w ^)

#4

The main issue I’m seeing in your code is with your TestingGui.
Specifically, you’re passing in the child table for the Roact element’s property table. To fix, this, simply add an empty table as the second argument for Roact.createElement.

-- Fixed TestingGui
local TestingGui = Roact.createElement("ScreenGui", {}, {
	ReallyCoolFrame = Roact.createElement(CreateBlankFrame(),{
		ZIndex = 30;
	})
})

As a bit of extra information, if for whatever reason you’re wanting to define the children inside the element properties, you would use [Roact.Children] as a key and the table of children as the value

-- TestingGui using [Roact.Children]
local TestingGui = Roact.createElement("ScreenGui", {
	[Roact.Children] = {
		ReallyCoolFrame = Roact.createElement(CreateBlankFrame(),{
			ZIndex = 30;
		})
	}	
})

Hope this was at all helpful.

1 Like