Binding 2 APIs

As mentioned previously, I am using 2 APIs (stop_finder & departure_mon) to fetch the data and output the train’s departure time. This would be a perfect opportunity to use departure_mon api since the return has all the upcoming departure time of a given station. However, the input that departure_mon api takes is a stop ID which unlikely, the user is not going to know what the ID of the stations are. The user will likely to type in the name of the station and expecting the output to be the departure’s time.

stop_finder allows the user to type in the name of any places and match it with the stops. This is useful for auto-suggesting when the user is currently typing.

What I need to do?

I need to use stop_finder API to take the user’s input name and match it with the stopID present in departure_mon API so that it will return the departure’s time of the given name

OnClick ( ) for button

The button component is written in Functional Component (Stateless Component) but we needed to access the state from the data API in the App.js file. We can use React Hooks to access state without having to use classes.

import React, { useState } from "react";
const [isSubmitting, setIsSubmitting] = useState(false);

Use a promise

What is a promise? instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.

In the above code, stop_finder() returns a promise so if the promise is returned, then it will return the the stopID that matches in the destination_mon() API