React Ionic Navigation with directly passed functional props

Ionic Framework
1

I was hoping someone could shed some light on this Stack Overflow question:

Since writing that I’ve been able to what I need with modals, but I don’t want every screen to appear with the modal animation and not support a proper back button.

So like, for instance, how do I do this, but with a “pushed” page instead of a modal one?

    {showStageSelection && (
      <IonModal isOpen>
        <SelectStage
          stages={item.stages}
          onCancel={() => setShowStageSelection(false)}
          onComplete={stages => {
            setItem({ ...item, stages })
            setShowStageSelection(false)
          }}
        />
      </IonModal>
    )}
2

I’m not sure I’m entirely following, but perhaps you could…

<Route path="/my-modal-path">
  <IonModal isOpen>
    // Everything else
  </IonModal>
</Route>

Then you could just do a history.push('/my-modal-path')

Do you think that would work?

3

Thanks, but not really :confused:

Basically, I want to push a component, while directly setting its props from the previous component.

Something more like:

<IonItem onClick={() => {
  history.push(
    <MyPage onSetValue={(value) => setValue(value)} />
  )
}>
  Choose a value
</IonItem>

And then the page would slide in from the right (like a standard iOS non-modal navigation transition)

4

So in nested routes, I believe you can pass props like what you’re wanting to do.

<Route path="/my-modal-path">
  <MyPage onSetValue={(value) => setValue(value)} />
</Route>

and then simply do the history.push().

Also, you could do…

<Route render={<MyPage ...props>} />

Just some options though!

5

i would say if you are passing functional props then maybe you should be using a state manager?

1 Like