React Ionic Navigation with directly passed functional props

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>
          onCancel={() => setShowStageSelection(false)}
          onComplete={stages => {
            setItem({ ...item, stages })

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

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

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

Do you think that would work?

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={() => {
    <MyPage onSetValue={(value) => setValue(value)} />
  Choose a value

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

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)} />

and then simply do the history.push().

Also, you could do…

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

Just some options though!

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

1 Like