R
roblox-ts•2w ago
kv_

React Context hook does not update consumer

Hello, I have yet another react question :p I am creating a datastore editor plugin and I have a list of datastore keys. Each of these is a button and when clicked, the data associated with that key should appear in the main editor. In order to do this I am using a context hook, and each key selection is a provider for the context hook. The main editor is a consumer of the hook. The context is created outside of the main component and passed in as a prop (I am not sure how else to do this, I could create the context inside the main component but I see no difference there): 
onStart(): void {
  const defaultContext = {
    keys: this._editorSession.getKeys(),
    active_key: ""
  }
  
  this._root = createRoot(this._widget);
  this._reactContext = React.createContext(defaultContext) as never; // create the default context and pass as prop
  this._root.render(React.createElement(App, { editor: this._editorSession, context: this._reactContext }));
}
onStart(): void {
  const defaultContext = {
    keys: this._editorSession.getKeys(),
    active_key: ""
  }
  
  this._root = createRoot(this._widget);
  this._reactContext = React.createContext(defaultContext) as never; // create the default context and pass as prop
  this._root.render(React.createElement(App, { editor: this._editorSession, context: this._reactContext }));
}
continued below...
3 Replies
kv_
kv_OP•2w ago
In the app component, each key of defaultContext is used to create a selection component: 
const stateContext = React.useContext(props.context);

return(
  <frame 
    children={
      [stateContext.keys.map((key: string) => // Each key of stateContext is used to create an element
        <KioskObject key={key} context={props.context} />
      )]} />
  <frame>
      <textlabel Text={stateContext.active_key} /> // KioskObjects set the active_key member of the context, so this should display the key of whichever one was clicked
  </frame>
)
const stateContext = React.useContext(props.context);

return(
  <frame 
    children={
      [stateContext.keys.map((key: string) => // Each key of stateContext is used to create an element
        <KioskObject key={key} context={props.context} />
      )]} />
  <frame>
      <textlabel Text={stateContext.active_key} /> // KioskObjects set the active_key member of the context, so this should display the key of whichever one was clicked
  </frame>
)
The KioskObject components acts as a provider: 
const uiContext = React.useContext(props.context)
const [context, setContext] = useState({
  keys: uiContext.keys,
  active_key: uiContext.active_key
})

return(
  <props.context.Provider value={context}>
    <textbutton
      Event={{
        MouseButton1Click: () => {
          setContext({
            keys: context.keys,
            active_key: props.key
          })
        }
      }}/>
  </props.context.Provider>
)
const uiContext = React.useContext(props.context)
const [context, setContext] = useState({
  keys: uiContext.keys,
  active_key: uiContext.active_key
})

return(
  <props.context.Provider value={context}>
    <textbutton
      Event={{
        MouseButton1Click: () => {
          setContext({
            keys: context.keys,
            active_key: props.key
          })
        }
      }}/>
  </props.context.Provider>
)
The way I currently have this set up does not work for some reason unknown to me. The button receives the click event and sets the context state properly but that change does not replicate up to the context. I was basing the code I have here off of this guide .
kv_
kv_OP•2w ago
Ok, nevermind, apparently the table being passed into setContext only contains keys...?
No description
kv_
kv_OP•2w ago
Ok, it turns out react consumes the props table's key member and when passed to the component it is nil. I renamed it to dsid however the textlabel doesn't appear to update when the state is set in KioskObject
No description

Did you find this page helpful?