reactjs - Can't render react component with props from mobx

Question

I'm trying to render component inside another component in React. I can't understand why optionwrapper doesn't renders when fetching is done. It would be perfect if someone can explain why it doen't work

const SearchResults = () => {
  useEffect( () => {
    GlobalStore.setOptions();
  }, []);
return(
    
      <div className={styles.column}>
        {
          GlobalStore.getOptions.result=='OK' &&
          
          <OptionWrapper options={ GlobalStore.options.data.body} />
        }
       
   </div>
)}

question from:https://stackoverflow.com/questions/65900586/cant-render-react-component-with-props-from-mobx

Answer 1

I think you should wrap SearchResults component using observer

const SearchResults =observer(() => {
  useEffect( () => {
    GlobalStore.setOptions();
  }, []);
return(
    
      <div className={styles.column}>
        {
          GlobalStore.getOptions.result=='OK' &&
          
          <OptionWrapper options={ GlobalStore.options.data.body} />
        }
       
   </div>
)})