Step change button not working

[andresdellachiesa]

Hello there! I have the following code:

                        <StepWizard transitions={noTransitions} isHashEnabled>
                            <fieldset>
                                <h5>fsdfdsfsdf</h5>
                                <button className='btn btn-primary btn-block' onClick={nextStep}>Continue</button>
                            </fieldset>
                            <fieldset isActive>
                                <h5>dsggdfg</h5>
                                <button className='btn btn-default btn-block' onClick={previousStep}>Go Back</button>
                            </fieldset>
                        </StepWizard>

Nevertheless, when I click on Continue button, nothing changes. The page reloads, but nothing changes. Any ideas?

Thanks in advance.

[andresdellachiesa]

I realise that none of the props functionalities are coming with props. Any ideas on this?

[resolritter]

The children have to be functions or React Components for getting access to the props

https://github.com/jcmcneal/react-step-wizard/blob/6ee7978ccc08021c7e2ca54d9d77a6de3b992117/src/index.js#L189-L190

See this code sandbox https://codesandbox.io/s/pensive-spence-uephm?file=/src/App.js

source code

```jsx import React from "react"; import StepWizard from "react-step-wizard"; const Step2 = ({ nextStep }) => (

Step 2

Continue

); export default function App() { const Step1 = React.useCallback( ({ nextStep }) => (

Step 1

Continue

), [] ); return (

Hello world!

{/* first child is defined with React.useCallback, has access to props */} {/* second child is defined as an external function, has access to props */} {/* third child is defined inline as an object, DOES NOT have access to props */} {React.useMemo(function () { return (

This child does not have access to props

Go back does not work

); }, [])}

); } ```

i.e. you could change your example to this

                        <StepWizard>
                           <Step1 />
                           <Step2 />
                        </StepWizard>