Props in Computed values

[GHEMID-Mohamed]

Hello :1st_place_medal:

I can't access to props of the component in computed values

const Parent = provideState({
  initialState: () => ({ childId: "16515224" })
})(() => (
  <div>
    This is the Parent.
    <Child id={state.childId}/>
  </div>
));

const Child = provideState({
  initialState: () => ({ name: "Zaki" }),
  computed: {
    childWithId: ({ id, name }) => `${state.name} ${id}`
  }
})(injectState(({ state }) => (
  <div>
    {state.childWithId}
  </div>
));

Do you have any idea of how this can be done ?

[divmain]

There isn't a way to directly get at props from a computed property. Due to freactal's hierarchical nature, it wouldn't be possible to know which prop is being referenced, since the state can come from anywhere higher in the component tree.

However, you can use the pattern of setting initial state from props that are provided. initialState of the Child component accepts props as its argument. So in your example, you would do something like:

const Child = provideState({
  initialState: ({ id }) => ({ id, name: "Zaki" }), // <-- CHANGE MADE ON THIS LINE
  computed: {
    childWithId: ({ id, name }) => `${state.name} ${id}`
  }
})(injectState(({ state }) => (
  <div>
    {state.childWithId}
  </div>
));

I hope that helps!

[GHEMID-Mohamed]

Yes Thank you, that resovle the problem :)