Show API on UI

I was getting my API working and it was displaying on my console but I now had to try and make it show on the web page instead of my console. This is done through passing props.

The way the application is set up is divided into two sections (or components)

• Top section: search bar and button
• Bottom section: displaying results

Both components are rendered in App.js file

Showing the destination

In App.js, I have to create a state component (Class Component) so that I am able to set the state of the destination when API is fired.

the initial state of the destination is undefined because we haven’t got any data yet.

Set data API as state

Write a method (function) within the Class Component to get the data from the API. Within the function, pass in data argument so that the destination can be updated with the data from the API. To update destination, simply add this.setState({destination: data.locations[0].name})

the API data is output as an object and to access the value, you have to do .locations

Rendering out into the UI

Using the render method, render out the top section and bottom section <TopSection /> and <BottomSection />

We want to display the destination in the bottom section so we’re going to pass in the props for destination with the updated state that we defined previously <BottomSection destination={this.state.destination} />

Update BottomSection file

This file contains the BottomSection component where I have styled the web application for the bottom section for the data to be displayed. Make sure you update where you wanted the destination to output by passing in props.

<h2> {this.props.destination} </h2>