Doesn't work as expected when pass store as props to children?

[panda0603]

Hello,

I have following component in my App in React-native. I am passing memoryStore.memory and memoryStore.setMemory individually to child component.

const Picker: React.FC = observer(() => {
  const {memoryStore} = useStore();

  return (
    <View style={styles.container}>
      <View style={styles.innerContainer}>
        {memoryList.map((item) => (
          <MemoryItem
            key={item.title}
            memoryTitle={item.title}
            selectedMemory={memoryStore.memory}  // defaut is ''(empty string)
            setSelectedMemory={memoryStore.setMemory}
          />
        ))}
      </View>
    </View>
  );
});

export default observer(MemoryPicker);

In child MemoryItem component, I am trying to use the store passed as props as follows:

const MemoryItem: React.FC<PropTypes> = ({
  memoryTitle,
  selectedMemory,
  setSelectedMemory,
}) => {

  function onPressItem() {
    setSelectedMemory(memoryTitle); // this doesn't work
    console.log(selectedMemory); // still empty string

   // If I use runInAction instead above, 
   runInAction(()=>{
       selectedMemory = memoryTitle;
   }
   console.log(selectedMemory); // selectedMemory changes as expected, however, doesn't re-render the child-component
  }

  return (
    <View style={styles.container}>
       <TouchableOpacity onPress={onPressItem}> ...</TouchableOpacity>
       ...
      <Text>{selectedMemory}</Text>
    </View>
  );
};

export default MemoryItem;

As explained above, store doesn't work as expected when its observables and actions are individually passed as props. (passing the memoryStore whole as props works fine)

Is this intended ?

If I call useStore() in MemoryItem child component and use selectedMemory and setSelectedMemory directly, everything works as expected. I am not sure why passing individually as props doesn't work. As far as I remember, prior to react hooks, when I used @inject and @observer, passing as props worked fine.

Anything I am missing?

Thanks

[mweststrate]

MemoryItem should be observer if it reads from the store

…

On Sun, 20 Sep 2020, 03:13 Eric, ***@***.***> wrote: Hello, I have following component in my App in React-native. I am passing memoryStore.memory and memoryStore.setMemory to child component. const Picker: React.FC = observer(() => { const {memoryStore} = useStore(); return ( <View style={styles.container}> <View style={styles.innerContainer}> {memoryList.map((item) => ( <MemoryItem key={item.title} memoryTitle={item.title} selectedMemory={memoryStore.memory} // defaut is ''(empty string) setSelectedMemory={memoryStore.setMemory} /> ))} </View> </View> ); }); export default observer(MemoryPicker); In child MemoryItem component, I am trying to used the store passed as props as follows: const MemoryItem: React.FC<PropTypes> = ({ memoryTitle, selectedMemory, setSelectedMemory, }) => { function onPressItem() { setMemoryMemory(memoryTitle); // this doesn't work console.log(selectedMemory); // still empty string // If I use runInAction, runInAction(()=>{ selectedMemory = memoryTitle; } console.log(selectedMemory); // this works as expected } return ( <View style={styles.container}> ... <Text>{selectedMemory}</Text> </View> ); }; export default MemoryItem; As explained above, store doesn't work as expected when its observables and actions are passed as props. Is this intended ? If I call useStore() in MemoryItem child component and use selectedMemory and setSelectedMemory directly, everything works as expected. I am not sure why passing as props doesn't work. As far as I remember, prior to react hooks, when I used @Inject and @observer, passing as props worked fine. Anything I am missing? Thanks — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <https://github.com/mobxjs/mobx-react-lite/issues/318>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBEINPJXLWQM5C53WZDSGVQMBANCNFSM4RTLRUAQ> .

[mweststrate]

Is memoryStore.setMemory bound? Otherwise you can't pass it down like that

…

On Sun, 20 Sep 2020, 03:13 Eric, ***@***.***> wrote: Hello, I have following component in my App in React-native. I am passing memoryStore.memory and memoryStore.setMemory to child component. const Picker: React.FC = observer(() => { const {memoryStore} = useStore(); return ( <View style={styles.container}> <View style={styles.innerContainer}> {memoryList.map((item) => ( <MemoryItem key={item.title} memoryTitle={item.title} selectedMemory={memoryStore.memory} // defaut is ''(empty string) setSelectedMemory={memoryStore.setMemory} /> ))} </View> </View> ); }); export default observer(MemoryPicker); In child MemoryItem component, I am trying to used the store passed as props as follows: const MemoryItem: React.FC<PropTypes> = ({ memoryTitle, selectedMemory, setSelectedMemory, }) => { function onPressItem() { setMemoryMemory(memoryTitle); // this doesn't work console.log(selectedMemory); // still empty string // If I use runInAction, runInAction(()=>{ selectedMemory = memoryTitle; } console.log(selectedMemory); // this works as expected } return ( <View style={styles.container}> ... <Text>{selectedMemory}</Text> </View> ); }; export default MemoryItem; As explained above, store doesn't work as expected when its observables and actions are passed as props. Is this intended ? If I call useStore() in MemoryItem child component and use selectedMemory and setSelectedMemory directly, everything works as expected. I am not sure why passing as props doesn't work. As far as I remember, prior to react hooks, when I used @Inject and @observer, passing as props worked fine. Anything I am missing? Thanks — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <https://github.com/mobxjs/mobx-react-lite/issues/318>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBEINPJXLWQM5C53WZDSGVQMBANCNFSM4RTLRUAQ> .

[panda0603]

@mweststrate MemoryItem should still be observer even if the observables are passed down as props, and not read from the useStore? Anyhow I tried wrapping MemoryItem with observer, still the same result.

Can you elaborate a bit more what you mean by bound? Thanks!

[mweststrate]

Make sure you understand what the this keyword means in javascript. setSelectedMemory={memoryStore.setMemory} will break your setMemory function if it uses this and isn't an arrow function. Check e.g. https://www.google.com/search?q=javascript+bind. If you need further help, make sure to provide a simple sandbox with your problem, otherwise this is gonna be an endless back and forth with asking more information :)