Name Roact elements in functions

Help and Feedback Scripting Support
#1

You can write your topic however you want, but you need to answer these questions:

  1. What do you want to achieve? I want to create a roact element in a function but I dont know how to name it.

  2. What is the issue? It wont let me name it like its children or through its properties

  3. What solutions have you tried so far? Ive looked everywhere but it seems nobody has encountered this issue

As you can see for the frame element I cannot change its name no matter what and its name is just the name that roact gave it, while the frames children can be named by naming it a variable it is hard to do that as there requires a return for this function.

return Roact.createElement("Frame",{
		Name = "Hello",
		Position = props.Position,
		BackgroundTransparency = 1,
		Size = UDim2.fromScale(0.05, 0.125),
	}, {
		Button = Roact.createElement("ImageButton", {
			Image = "rbxassetid://17322749703",
			BackgroundTransparency = 1,
			ScaleType = "Fit",
			Size = UDim2.fromScale(0.7, 1),
			[Roact.Event.Activated] = function(rbx)
				print("Clicked ".. rbx.Name)
				print(props.Name)
			end,
		}, {})
})

Cheers!

1 Like
#2 
local roact = require(game.ReplicatedStorage:WaitForChild("roact"))

local frameComponent = roact.Component:extend("frameComponent")

function frameComponent:init()
	self.frame = roact.createRef()
end

function frameComponent:render()
	return roact.createElement("Frame",{
		[roact.Ref] = self.frame,
		Position = self.props.Position,
		BackgroundTransparency = 1,
		Size = UDim2.fromScale(0.05, 0.125),
	}, {
		Button = roact.createElement("ImageButton", {
			Image = "rbxassetid://17322749703",
			BackgroundTransparency = 1,
			ScaleType = "Fit",
			Size = UDim2.fromScale(0.7, 1),
			[roact.Event.Activated] = function(rbx)
				print("Clicked ".. rbx.Name)
				print(self.props.Name)
			end,
		}, {})
	})
end

function frameComponent:didMount()
	local frameInstance = self.frame:getValue()
	frameInstance.Name = 'Hello'
end

return frameComponent

you could do this to fix your issue, i have used roacts lifecycle methods :render() :init() :didMount() and roacts usefull components. there may be other methods out there. hope this helps!

1 Like