1

I have a component which renders a form. This form can spit back the distance between a collection of predetermined airports.

{
  JFK: { LAX: 2475, LAS: 2248, PDX: 2454 },
  LAX: { JFK: 2475, LAS: 236, PDX: 834 },
  LAS: { JFK: 2248, LAX: 236, PDX: 763 },
  PDX: { JFK: 2454, LAS: 763, LAX: 834 },
}

This object represents the data I will be fetching like I would in an API.

The form contains two select/option drop-downs. One represents the starting point and the other represents the end point.

enter image description here I put all the relevant code in a function called handleSumbit which should should fire off a function I am importing which would output the distance between the selected airports.

handleSubmit(e) {
    e.preventDefault();

    function returnAirPort(airport) {
      return airport;
    }

    var starting = document.getElementById('starting'),
        destination = document.getElementById('destination'),
        startingEventVal,
        destinationEventVal;

    starting.addEventListener('change', function(e) {
      startingEventVal = returnAirPort(e.srcElement.value);
      console.log('startingEventVal', startingEventVal);
    });

    destination.addEventListener('change', function(e) {
      destinationEventVal = returnAirPort(e.srcElement.value);
      console.log('destinationEventVal', destinationEventVal);
    });

    (function(startingEventVal, destinationEventVal) {
      var distance = IntentMedia.Distances.distance_between_airports(startingEventVal, destinationEventVal);
      console.log("distance", distance);

      document.getElementById('feedback').innterHTML = distance
    })(startingEventVal, destinationEventVal);
  }

Right now all I am getting in the console is -1; the value one would get if the distance cannot be determined or you entered an invalid airport?! Shouldn't I at least be getting that rendered as well in the DOM?

This is the form:

      <form onSubmit={this.handleSubmit}>
        {console.log(airportNames)}
        <div className="row">
          <div className="twelve columns">
            <h2>The following are our available flights</h2>
            <p>
              If your airport exists in the following dropdown we can supply the distance in miles or Kilometers below
              between them.
            </p>

            <label htmlFor="exampleEmailInput">Your Starting Airport</label>
            <select id="starting" className="u-full-width">
              <option defaultValue> -- select an option -- </option>
              {airportNames}
            </select>
          </div>
          <div className="twelve columns">
            <label htmlFor="exampleEmailInput">Your destination</label>
            <select id="destination" className="u-full-width">
              <option defaultValue> -- select an option -- </option>

              {airportNames}
            </select>
          </div>
        </div>
        <p id="feedback" />
        <button>Submit</button>
      </form>

So my question is how do I render to the DOM the distance between the selected airports?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Antonio Pavicevac-Ortiz
  • 7,239
  • 17
  • 68
  • 141
  • 4
    i would start reading some documentations of react and especially this starting point [thinking-in-react](https://reactjs.org/docs/thinking-in-react.html). you are doing things in the old way, querying the `DOM` dispatching events, this is the opposite of the core concepts of react. – Sagiv b.g Jun 06 '18 at 13:48
  • 2
    I agree with @Sagivb.g you'd find very valuable core concepts in the docs. Also I would have state properties like `startingSelectedValue` and `destinationSelectedValue` and update them `onChange` on their respective selects – t3__rry Jun 06 '18 at 13:51
  • @Sagivb.g You're absolutely right. I am sort of in a pickle. I was asked as an exercise to do the old way no frameworks, and guess I am trying to have it both ways. What I was going to say when I submitted was I only used this set up to quickly mock something out. Essentially I am used webpack, babel for some SCSS stuff. – Antonio Pavicevac-Ortiz Jun 06 '18 at 13:56

0 Answers0