Update the status and props in the form of a reaction-reduction on the same button "Submit"

Question

I am very new to react, so it can become lousy.

I started with the wizard form from https://redux-form.com/7.2.3/examples/wizard/ and tried to submit the form and change the page to the same address.

I mean, submit the form to WizardFormSecondPage and change the page to WizardFormThirdPage to show the values. So far I have managed to submit the form and change the page, but separately, and with all my strength I am trying to connect both events to the same button click.

Perhaps you can check the details using the instructions in and run .state? (Of course, this is syntactically wrong, but just trying to show the idea)

class WizardForm extends Component { constructor(props) { super(props) this.nextPage = this.nextPage.bind(this) this.previousPage = this.previousPage.bind(this) this.state = { page: 1 } } nextPage() { this.setState({ page: this.state.page + 1 }) } previousPage() { this.setState({ page: this.state.page - 1 }) } render() { const { onSubmit } = this.props const { page } = this.state return ( <div> {page === 1 && <WizardFormFirstPage onSubmit={this.nextPage} />} {page === 2 && ( <WizardFormSecondPage previousPage={this.previousPage} if(onSubmit={onSubmit}) { this.nextPage } /> )} {page === 3 && ( <WizardFormThirdPage /> )} </div> ) } } WizardForm.propTypes = { onSubmit: PropTypes.func.isRequired } export default WizardForm 

UPDATE: So another idea would be to display the third page from showResults.js , which is called from index.js on <WizardForm onSubmit={showResults} />

 import React from "react"; const testField = () => ( <div> <h1>TEST</h1> </div> ); const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); export default (async function showResults(values) { await sleep(500); // simulate server latency console.log(`You submitted:\n\n${JSON.stringify(values, null, 2)}`); testField; }); 

By default, showResults returns console.log with the presented field data, now I'm trying to just make a simple div, but without any decent results. Can someone tell showResults where the point is skipped, and what are the best methods for creating the showResults component?

Answer 1

https://github.com/final-form/react-final-form solved my problem, it is much more functional and easy to use.

Answer 2

you can create:

 class WizardFormSecondPage extends Component { constructor(props) { super(props); this.myHandleSubmit = this.myHandleSubmit.bind(this) } myHandleSubmit(){ this.props.handleSubmit() this.props.nextPage() } .... .... <Form onSubmit={this.myHandleSubmit}> } 

So basically pass this custom handler to your form or button!