ReactJS How to save/update variable based on form input/submission?


Ask A Question





Login To post a question

I have a modal and in it I have a single input form. When submitted I want the variable called surveyID to update and stay saved. The surveyID is part of an airtable url to a survey that I’m embedding into the page. ie: src="https://airtable.com/embed/SURVEY_ID_HERE?backgroundColor=blue"

Essentially I want to be able to change the embedded survey so that I can reuse the same page without having to go and change my code every time. Unfortunately, I’m not getting surveyID to change and stay changed. I’m unsure of how to update and the state/variable. I am still new to React and trying to understand how React and states work (and if this is even possible with React). Here is my code:

Update: If this is clearer: I am trying to globally store a value(surveyID) from a form into firebase database and then get the data from firebase and replace my previous surveyID with the value just stored in the database.

changeSurvey.js

import React, from "react";
import { Button,  Container,  Modal,  ModalBody,
           ModalHeader,  ModalFooter } from "mdbreact";
import { fullID } from "./Surveys";

var surveyID = "shrYA7AmSlGDLoLd9"; //example ID
// I want to be able to change surveyID with whatever
// input someone submits and save the value until
// someone decides to change it again

class ChangeSurvey extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    console.log("Current surveyID: " + surveyID);
    console.log("Full survey URL: " + fullID);

    this.setState({
      modal: !this.state.modal
    });
  }

  handleChange(event) {
    this.setState({ surveyID: event.target.value });
  }


  render() {
    return (
      <Container>
        <Button color="orange" rounded onClick={this.toggle}>
          Change Survey
        </Button>

        <Modal
          className="text-center"
          isOpen={this.state.modal}
          toggle={this.toggle}
        >
          <ModalHeader toggle={this.toggle}>Change Current Survey</ModalHeader>
          <ModalBody>
            <p>
              To find the surveyID, go to the Airtable survey form you want to
              display and click on "Share form."
              <br />
              Your surveyID appears in the format:{" "}
              <code
                style={{
                  color: "black",
                  backgroundColor: "rgba(178, 190, 195,.4)"
                }}
              >
                https://airtable.com/SURVEY_ID
              </code>
              <br />
              Copy and paste the surveyID into the form.
              <br />
              Current surveyID:{" "}
              <code
                style={{
                  color: "black",
                  backgroundColor: "rgba(178, 190, 195, .4)"
                }}
              >
                {" "}
                {surveyID}{" "}
              </code>
            </p>
            <br />
//this is where I get user input
        <input
          type="text"
          name="surveyID"
          value={this.state.surveyID}
          onChange={this.handleChange.bind(this)}
        />
//this is the submit button
        <Button
          color="primary"
          type="submit"
          onSubmit={this.handleChange.bind(this)}
        >
          Change Survey
        </Button>

          </ModalBody>

          <ModalFooter>
            <Button color="secondary" onClick={this.toggle}>
              Close
            </Button>
          </ModalFooter>
        </Modal>
      </Container>
    );
  }
}

In case anyone also wanted to look where fullID comes from :

Surveys.js

import ChangeSurvey, { surveyID } from "./changeSurvey";

let fullID = "";

class SurveyPage extends Component {
  constructor() {
    super();
    this.state = {
    };
  }

  render() {
      fullID =
        "https://airtable.com/embed/" + surveyID + "?backgroundColor=tealLight";

      console.log("Full survey URL: " + fullID);

      return (
        <div>
          <div id="content">
            <script src="https://static.airtable.com/js/embed/embed_snippet_v1.js" />
            <IframeComponent
              class="airtable-embed airtable-dynamic-height"
              src={fullID}
            />
          </div>
          <div
            style={{
              position: "absolute",
              top: this.props.top,
              left: this.props.left
            }}
          >
            <ChangeSurvey />
          </div>
        </div>
      );
    }
  }
}

For more info please click herehttps://stackoverflow.com/q/51844624



Have a question or need a custom quote?
info@smartinfocare.com