Basically I have a 3 page form, clicking the submit button on one page brings you to the next page etc.
The on the third page I'd like to have all the data from the 3 pages put into a redux store.
I am using redux-form and the following example to implement it into my project https://codesandbox.io/s/0Qzz3843.
In the example there is a section on the page where as I they are typed in, the values are displayed in a component, I don't need this.
I'd just like for all the data to be alerted when the final form is submitted.
I'm sorry I can't put it on something like code pen because it is a big project. Also I can't change the form, because the react-bootstrap form im using has to be in this exact layout:
LAST FORM PAGE:
import React, { Component } from 'react';
import { Col, Row, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
import { withRouter } from 'react-router-dom';
import validate from '../validate';
import { reduxForm } from 'redux-form';
import './NewForm.css';
import renderField from '../renderField';
import data from '../data.json';
const NewFormPOI = props => {
const { handleSubmit } = props;
let placeholders = data.en.placeholders;
return (
<Form onSubmit={handleSubmit} className="form">
{/* General Information */}
<FormGroup row>
<Col sm={6}>
<Input component={renderField} type="text" name="poiName" id="poiName" placeholder={placeholders.poiName} />
</Col>
<Col sm={6}>
<Input component={renderField} id="poiType" className="form-control" type="select" name="poiType">
<option className="selectDefault" disabled selected>{placeholders.poiType}</option>
<option value="Hu">Hi</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col sm={12}>
<Input component={renderField} type="textarea" name="poiDesc" id="poiDesc" placeholder={placeholders.POIdesc} />
</Col>
</FormGroup>
<FormGroup row>
<Col sm={6}>
<Input component={renderField} type="email" name="poiDuration" id="poiDuration" placeholder={placeholders.poiDuration} />
</Col>
<Col sm={6}>
<Input component={renderField} type="text" name="poiRanking" id="poiRanking" placeholder={placeholders.poiRanking} />
</Col>
</FormGroup>
<FormGroup row>
<Col sm={6}>
<Input component={renderField} type="text" name="poiAccess" id="poiAccess" placeholder={placeholders.access} />
</Col>
<Col sm={6}>
<Input component={renderField} type="textarea" name="poiTime" id="poiTime" placeholder={placeholders.times} />
</Col>
</FormGroup>
<hr/>
<FormGroup row>
<Col sm={12}>
<Input component={renderField} type="textarea" name="txtHeader" id="txtHeader" placeholder={placeholders.textHeader} />
</Col>
</FormGroup>
<FormGroup row>
<Col sm={12}>
<Input component={renderField} type="textarea" name="txtContent" id="txtContent" placeholder={placeholders.textContent}/>
</Col>
</FormGroup>
<FormGroup check row>
<Col sm={{ size: 6 }}>
<Button className="btn-info" type="submit" className="next">Next </Button>
</Col>
</FormGroup>
</Form>
)
}
export default withRouter(reduxForm({
form: 'wizard', // <------ same form name
destroyOnUnmount: false, // <------ preserve form data
forceUnregisterOnUnmount: true // <------ unregister fields on unmount
})(NewFormPOI));
WIZARDFORM.JS
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import NewFormDetails from './components/NewFormDetails';
import NewFormTours from './components/NewFormTours';
import NewFormPOI from './components/NewFormPOI';
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 && <NewFormDetails onSubmit={this.nextPage} />}
{page === 2 && (
<NewFormTours
previousPage={this.previousPage}
onSubmit={this.nextPage}
/>
)}
{page === 3 && (
<NewFormPOI
previousPage={this.previousPage}
onSubmit={onSubmit}
/>
)}
</div>
)
}
}
WizardForm.propTypes = {
onSubmit: PropTypes.func.isRequired
}
export default WizardForm
STORE.JS
import { createStore, combineReducers } from 'redux';
import { reducer as reduxFormReducer } from 'redux-form';
const reducer = combineReducers({
form: reduxFormReducer, // mounted under "form"
});
const store = (window.devToolsExtension
? window.devToolsExtension()(createStore)
: createStore)(reducer);
export default store;
INDEX.JS
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from "react-router-dom";
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createBrowserHistory } from "history";
import { Provider } from "react-redux";
import store from './store';
const history = createBrowserHistory();
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<App />
</Router>
</Provider>,
document.getElementById("root")
);
serviceWorker.unregister();
APP.JS
render() {
const mouseEnter = e => {
this.setState({sideNav: "sideNav sidenav---sidenav---_2tBP sidenav---expanded---1KdUL"});
}
const mouseLeave = e => {
this.setState({sideNav: "sidenav---sidenav---_2tBP sidenav---collapsed---LQDEv"});
}
return (
<div className="App container">
<div>
<SideNav
onMouseEnter={mouseEnter}
onMouseLeave={mouseLeave}
className={this.state.sideNav}
onSelect={(selected) => {
// Add your code here
}}
>
<SideNav.Nav defaultSelected="home">
<NavItem eventKey="home">
<NavIcon>
<Link to="/"><img src={Dash}/></Link>
</NavIcon>
<NavText>
<Link to="/">Dashboard</Link>
</NavText>
</NavItem>
<NavItem eventKey="sites">
<NavIcon>
<Link to="/sites"><img src={Site} /></Link>
</NavIcon>
<NavText>
<Link to="/sites">Sites</Link>
</NavText>
</NavItem>
<NavItem eventKey="tours">
<NavIcon>
<Link to="/tours"><img src={Tour}/></Link>
</NavIcon>
<NavText>
<Link to="/tours">Tours</Link>
</NavText>
</NavItem>
<NavItem eventKey="media">
<NavIcon>
<Link to="/media"><img src={Media}/> </Link>
</NavIcon>
<NavText>
<Link to="/media">Media</Link>
</NavText>
</NavItem>
<NavItem eventKey="newSite">
<NavIcon>
<Link to="/newSite/details"><img src={NewSite} /></Link>
</NavIcon>
<NavText>
<Link to="/newSite/details">Add new Site</Link>
</NavText>
</NavItem>
<NavItem eventKey="language">
<NavIcon>
<Link to="/language"><img src={Lang} /></Link>
</NavIcon>
<NavText>
<Link to="/language">Language</Link>
</NavText>
</NavItem>
<NavItem eventKey="profile">
<NavIcon>
<Link to="/profile"><img src={Profile} /></Link>
</NavIcon>
<NavText>
<Link to="/profile">Profile</Link>
</NavText>
</NavItem>
</SideNav.Nav>
</SideNav>
</div>
<WizardForm onSubmit={showResults} />
{/*<Routes childProps={this.state} /> */ }
</div>
);
}
}
export default App;
