Button text based on step

[Github743]

I want to change the button text dynamically based on the step I am on how to do that

[srdjan]

here is the part of docs that explains that:
https://github.com/srdjan/react-multistep#-new-you-can-also-use-style-props-for-the-navigation-buttons-and-change-how-they-look
I can see that docs for this are not clear and I'll fix that, meantime, here is an example app you can try:

import React from 'react'
import ReactDOM from 'react-dom'
import MultiStep from 'react-multistep'
import StepOne from './stepOne'
import StepTwo from './stepTwo'
import StepThree from './stepThree'
import StepFour from './stepFour'

const App = () => (
  <div className='container'>
    <MultiStep  title: 'Order Workflow'} 
                activeStep={2} 
                prevButton={{title: 'Back','style:{ background: 'red' }}
                nextButton={{title: 'Forward','style:{ background: 'green' }}
    >
      <StepOne title='Step 1'/>
      <StepTwo title='Step 2'/>
      <StepThree title='Step 3'/>
      <StepFour title='Step 4'/>
    </MultiStep>
    <div className='app-footer'>
      <h6>Use navigation buttons or click on progress bar for next step.</h6>
      Code is on{' '}
      <a href='https://github.com/Srdjan/react-multistep' target='_blank' rel='noreferrer'>
        GitHub
      </a>
    </div>
  </div>
)

ReactDOM.render(<App />,   ##document.getElementById('root'))

So, because of this line:

    <MultiStep activeStep={0} prevButton={{title: 'Before','style:{ background: 'red' }, title: 

Previous button will have 'red' background and text will say: 'Before'

[Github743]

Ok but this will set <MultiStep activeStep={0} active step as 0 or what ever I set. What I want it let us say if I am on step 2 I would like change the button text as Submit. Also the last page button was disable by default how to do that. I am using the component by installing it from packages is it similar to the file you have in MultiStep.tsx or do I need to externally add that as per in the demo in to SRC folder?

Here is the one I am trying out

https://github.com/Github743/MultiStep

[Github743]

Here is the code

https://codesandbox.io/s/59gqjg

If you check the last step continue was disabled where I need to button text to be submit and enabled

[srdjan]

I see... Sorry, I misunderstood your issue, although it was clearly stated :)
This is not supported at the moment, I'll take a look over the weekend and possibly add it...

[Github743]

I see... Sorry, I misunderstood your issue, although it was clearly stated :) This is not supported at the moment, I'll take a look over the weekend and possibly add it...

Thank you

[Github743]

I see... Sorry, I misunderstood your issue, although it was clearly stated :) This is not supported at the moment, I'll take a look over the weekend and possibly add it...

any luck on this?

[srdjan]

yes, there is some progress, will try to finish it next weekend, only time I can work on it :(
should be able to close both this request & #110

[Github743]

yes, there is some progress, will try to finish it next weekend, only time I can work on it :( should be able to close both this request & #110

No problem just waiting for the fix to be available

[srdjan]

ok, I have a working sample, you can see the demo here (and link to the code is below):

submit-demo.mov

Unfortunately, while doing this< I realized that it is better for MultiStep to stay focused on its only concern: navigation and leave it to child components to execute their own logic/actions...
What you want will still be possible, but MultiStep will only navigate and interact with child components only for validation purposes. Business logic Actions will be responsibility of child components. Also, navigation buttons appearance will change, to make it obvious that they are only for navigation. I'll add the example once v6.0.0 progresses a little bit more.

Alternatively, you could fork this pre-release and see if it works for your case better, but, just a warning, for my taste things are getting a bit too complicated with back and forth between the multistep and child components.
This branch commit where you can check the code:
https://github.com/srdjan/react-multistep/tree/140abe7ad946a6c9b32538248cbf2ebef4c92831

The code that enabled 'Submit' functionality, will be removed in the following commits

[Github743]

Thanks for the update, I will check and let you know

[srdjan]

also, see here how nav buttons will look like in v6, it should make it nicer when you have action/submit buttons on child components:

[Github743]

also, see here how nav buttons will look like in v6, it should make it nicer when you have action/submit buttons on child components:

Do you have fiddle for the same like stackblitz or other?

[srdjan]

no :(
you can just pull the v6 branch and run locally?

[srdjan]

just to make it clear, if you couldn't play with it, this is how the last step could look like with 'Submit' button anywhere inside your own child component...

[srdjan]

closing - but will reconsider improvements when v6 gets a little bit more complete