Pass state to page on form submit?

Question

I have a state on one page, and when i submit a form I'd like to redirect to another page with the state of the source page, and populate the state on the new page with the old state on the old page haha if that makes sense. Hopefully my code attempt can explain it better.

class NewFormDetails extends Component {
    constructor(props) {
        super(props);

        this.state = {
            language: this.props.language,
            siteName: '',
            counties: '',
            siteAddress: '',
            siteEmail: '',
            siteNumber: '',
            siteCat: '',
            openTimes: '',
            fees: '',
            access: '',
            gps: '',
            w3w: '',
            txtHeader: '',
            txtContent: '',
            isLoading: false
        };

    }

    validateForm() {
        if (this.state.siteName != '' &&
            this.state.siteAddress != '' &&
            this.state.siteEmail != '' &&
            this.state.siteNumber != '' &&
            this.state.openTimes != '' && 
            this.state.fees != '' && 
            this.state.access != '' && 
            this.state.gps != '' && 
            this.state.w3w != '' && 
            this.state.txtHeader != '' && 
            this.state.txtContent != '') {
                return true;
            } else {
                return false;
            }
    }

    handleChange = e => {
        this.setState({ ...this.state, [e.target.name]: e.target.value });
        console.log(this.state);
    }

    handleSubmit = event => {
        event.preventDefault();

      /*  try {
            await this.createSiteDetails({
              siteName: this.state.siteName,
              siteAddress: this.state.siteAddress,
              siteCounty: this.state.counties,
              siteNumber: this.state.siteNumber,
              siteEmail: this.state.siteEmail,
              siteCategory: this.state.siteCat,
              siteOpeningTimes: this.state.openTimes,
              siteFees: this.state.fees,
              siteAccess: this.state.access,
              siteGPS: this.state.gps,
              siteW3W: this.state.w3w,
              siteHeaderText: this.state.txtHeader,
              siteContentText: this.state.txtContent
            });
            this.props.history.push("/");
          } catch (e) {
            alert(e);
            this.setState({ isLoading: false });
          } */



 console.log(this.state);
        this.props.history.push({
            pathname:"/newSite/tours",
            state:{
                value: this.state
             }
           });
    }

And here is the page i redirect to and attempt to get the state from the other page

    class NewFormTours extends Component {
        constructor(props) {
            super(props);

            this.state = {
                language: this.props.language,
                tourName: '',
                waypoints: '',
                duration: '',
                toursTxtHeader: '',
                toursTxtContent: '',
                siteName: this.siteName,
                counties: this.props.counties,
                siteAddress: this.props.siteAddress,
                siteEmail: this.props.siteEmail,
                siteNumber: this.props.siteNumber,
                siteCat: this.props.siteCat,
                openTimes: this.props.openTimes,
                fees: this.props.fees,
                access: this.props.access,
                gps: this.props.gps,
                w3w: this.props.w3w,
            detailsTxtHeader: this.props.detailsTxtHeader,
            detailsTxtContent: this.props.detailsTxtContent,  
        };

is this a single page application? or is it a new page load for each page? — John Ruddell, Mar 10 '19 at 22:41
Ok, where is the data being stored? are you using something like redux or a base state somewhere? — John Ruddell, Mar 10 '19 at 22:46
@JohnRuddell No, when the form is submitted the values go into the state of the first page, then when it is redirected, id like the values of the state in the second page to be assigned the corresponding values that of the first state — TiernO, Mar 10 '19 at 22:51

score 0 · Answer 1 · answered Mar 10 '19 at 23:43

0

You can use react router to pass data to new component. Below discussion should be helpful.

How do i pass state through React_router?

answered Mar 10 '19 at 23:43

Atul

3,013
2
12
15

Pass state to page on form submit?

1 Answers1