Build SpaceX fan site using GraphQL with React and Apollo Client -3
Tags: react, graphql, webdev, tutorial
Published: 2020-01-11 15:36:22

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ds6f1oig9d7p72vxtzhz.jpeg)
Welcome to part-3 of the series. 

This series is based on the youtube series by Brad Traversy and you can find it [here](https://medium.com/@nabendu82/build-spacex-fan-site-using-graphql-with-react-and-apollo-client-1-55c056e2d0f5).

Now, let’s send the data from our **Launches.js** file to a new component **LaunchItem.js**. We are just lopping through the data using map and then passing it to a new **LaunchItem** component.

![Launches.js](https://cdn-images-1.medium.com/max/2880/1*fQgOYR2JJ95mxT5-io4Dqg.png)*Launches.js*

Next, we will create the **LaunchItem.js** file in the same **components** folder. We are just de-structuring the props and showing it through some use of bootstrap classes.

![LaunchItem.js](https://cdn-images-1.medium.com/max/2880/1*Zosza7A8KqK_NE0pz7U5Ow.png)*LaunchItem.js*

It will show all the launches in a nice list view in our web-page.

![All Launches](https://cdn-images-1.medium.com/max/2880/1*vPKZ8HY1CN0KaJinqFZkCQ.png)*All Launches*

Next, we will install two packages in our **client** which will help us with showing different color for a failed or successful mission.

![classnames and moment](https://cdn-images-1.medium.com/max/2880/1*ngPCZRMuy-RN6Js0tqaqpg.png)*classnames and moment*

We also need to install one more package called **react-moment**, which i missed. So, npm install it in **client** folder.

![react-moment](https://cdn-images-1.medium.com/max/2880/1*F5vZm-WgretzZrPCQ2_o8Q.png)*react-moment*

Next, we will update our **LaunchItem.js** to use **classNames** and change the **mission_name** color to green or red, depending on whether **launch_success** is true or false.

![LaunchItem.js](https://cdn-images-1.medium.com/max/2880/1*wK8Oi4dAp-9Xyw4ovFLwCw.png)*LaunchItem.js*

Now, our web-app will show as below.

![Launches](https://cdn-images-1.medium.com/max/2880/1*oHdlDh2jaAENcep9i2ymxw.png)*Launches*

Now, the user show know what red and green means. So, we put a color description in **Launches.js**

![Launches.js](https://cdn-images-1.medium.com/max/2880/1*Zd1RGuTaPnFj5hgj0YMVvA.png)*Launches.js*

It will show these in our web-page.

![Success or Fail](https://cdn-images-1.medium.com/max/2880/1*DGARR2V4zmZk_hYZH269_w.png)*Success or Fail*

From the above image the date seems a bit difficult to read, so we will use moment to show it in a good format.

![Using Moment](https://cdn-images-1.medium.com/max/2880/1*lBDB5sjGFCf9ByJdZt9VfA.png)*Using Moment*

It will now show the date format in our web-page.

![Nice date format](https://cdn-images-1.medium.com/max/2880/1*YMHKYm-AvvwtBqTw8D7whQ.png)*Nice date format*

Now, when the user clicks on Launch Details it show open a different page, showing the details of the launch. We need to use react-router to navigate to different page. So, let’s npm install it in the **client** folder.

![react-router](https://cdn-images-1.medium.com/max/2880/1*4kDGU-2dWvkAoARtElF0xQ.png)*react-router*

Next, we will use routes in our **App.js**. We are first doing import of Router and the Launch component(yet to be created).

Then we are wrapping everything in Router and using two routes, one for **Launches** component an other for **Launch** component.

![Routes in App.js](https://cdn-images-1.medium.com/max/2880/1*6dGtDBice2rIRdZC31jdvQ.png)*Routes in App.js*

Next, we will create **Launch.js** inside the **components** folder and put the basic code in it. We will change the content later.

![Launch.js](https://cdn-images-1.medium.com/max/2880/1*cRCRmooOf-SjG9T_203raQ.png)*Launch.js*

We also need to change the simple button in our **LaunchItem.js** to use **Link** from react-router-dom.

![LaunchItem.js](https://cdn-images-1.medium.com/max/2880/1*NZl1enAoWIXyGKg6TFIixQ.png)*LaunchItem.js*

Now, once we click on the **Launch Details** link, it will show us the Launch Component. Also, notice the url as it got changed to the launch with flight_number.

![Web-page](https://cdn-images-1.medium.com/max/2880/1*pzLwiir7emtKI_0y9TogSg.png)*Web-page*

This completes the part-3 of the series. You can find the code for the same in my github repo [here](https://github.com/nabendu82/ReactApolloClient).