My inventory Roact system doesn't work

Help and Feedback Scripting Support
1

So i am relatively new to Roact i made a healthbar with it but the fact is that my inventory will be a little more complex. In the future i want the abillity to have ViewPorts inside each ‘Item’ that is in the inventory. I want to set callbacks to allow you to click the Item and See its Amount and Its Description

table is below when i call :retrieveItems() it gives me the table of that player’s inventory i want to loop through each and make a Viewport by finding the item name in a folder of the items then put it in a viewport which updates every time you get an item or a remove an item

This is the Table that gets returned

  {
   ["Log"] =    {
      ["Count"] = 3,
      ['Description'] = 'Long and Sturdy!",
      ['Weight'] = 6
   }
}

So i want to create the view port based on the items the player has can someone guide me on this

My Code 
local Player = game.Players.LocalPlayer
local PlayerGui = Player:WaitForChild("PlayerGui")
local Roact = require(game:WaitForChild('ReplicatedStorage').Modules.Roact)

local IventoryModule = require(game:GetService('ReplicatedStorage').Modules.inventoryModule)
local Inv = IventoryModule:getPlayerInventory(Player)

local InventoryTable = Inv:retrieveItems() --Player's Items

local Inventory = Roact.PureComponent:extend('InventoryGUI')

local ReplicatedStorage = game:GetService('ReplicatedStorage')
local ChangedEvent = ReplicatedStorage.Events.InventoryChange

local function itemFragment(self)
	    local fragment = {}
    for _,v in pairs(self.state.InventoryTable) do
        fragment[v] = Roact.createElement("TextLabel", {       
			Text = v,
        })
    end
    
    return Roact.createFragment(fragment)
end

function Inventory:init()
	self:setState({
		InventoryTable = Inv:retrieveItems()
	})
end

function Inventory:render()
  return Roact.createElement("ScreenGui", {}, {
    InventoryFrame = Roact.createElement("Frame", {
       Transparency = 1,
    }, {
       UiGridLayout = Roact.createElement("UIGridLayout", {
        
      }),
      Items = Roact.createElement(itemFragment, self)
    })
  })
end

function Inventory:didMount()
	local function updateTableState()
		self:setState({InventoryTable = Inv:retrieveItems()})
	end
	
	ChangedEvent.OnClientEvent:Connect(updateTableState)
end

Roact.mount(Roact.createElement(Inventory), PlayerGui, "Yeet")

Thanks

2

The issue is probably with the inventory table, as you’ve mixed quotes. On the second item, you started the value with an apostrophe, but ended it with a quote, which means the string hasn’t been closed. Try switching them all to quotes or apostrophes only.

On a side note, you should be disconnecting events on Component:willUnmount().

1 Like
3

Alright will do why do i need :willUnmount() i am not planning to unmount it. I just want to set a call back to enum code E which it opens the inventory i’m not sure if i can do all this with roact

4

That’s fair enough then. No need to disconnect the event if you’re mounting a new instance when the player respawns.

You can indeed achieve this, but you will need to make use of state management, using Rodux, for example.

5

I’m not sure what Rodux is and how would i install it?

6

Wait nvm did that i used the rbxm file to put in replicated storage

7

Rodux basically allows you to share state between your components, without having to pass props down through the tree. It can be quite complicated to get your head around (largely due to the terminology around Redux/Rodux), but your best bet is to follow the guides on GitHub:

https://roblox.github.io/roact-rodux/guide/installation/

1 Like
8

alrighty thanks!

30 charsaaaaaaaaaaaa