Tags are now links

package-lock.json

@@ -1837,7 +1837,7 @@
     },
     "axios": {
       "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "resolved": "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
       "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
       "requires": {
         "follow-redirects": "^1.3.0",
@@ -5879,11 +5879,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5896,15 +5898,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -6007,7 +6012,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -6017,6 +6023,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -6029,17 +6036,20 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -6056,6 +6066,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -6128,7 +6139,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6138,6 +6150,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6243,6 +6256,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",

src/App.js

@@ -10,6 +10,7 @@ import Suggestion from './areainfo/Suggestion';
 import { ReactHeight } from 'react-height';
 import './css/App.css';
 
+
 class App extends React.Component {
 	state = {
 		playerHeight: null,

src/VideoInfo.js

@@ -1,15 +1,18 @@
 import React from 'react';
 import Wikipedia from './areainfo/Wikipedia';
 import { Tabs, Tab, Table } from 'react-bootstrap';
-import { withRouter } from 'react-router-dom';
+import {Link, withRouter} from 'react-router-dom';
 import axios from 'axios';
 import Linkify from "react-linkify";
 import Card from "react-bootstrap/lib/Card";
 import moment from 'moment';
 import momentDurationFormat from 'moment-duration-format';
 import './css/VideoInfo.scss';
+
+
 const ytclear = require('@c0b41/ytclear');
 
+
 class VideoInfo extends React.Component {
 
     state = {
@@ -165,12 +168,16 @@ class VideoInfo extends React.Component {
                                 <b>Channel name: </b>{VideoDetails.snippet.channelTitle}<br />
                                 <b>Description: </b><Linkify>{VideoDetails.snippet.description}</Linkify><br />
                                 <b>Tags: </b>{VideoDetails.snippet.tags ?
-                                    VideoDetails.snippet.tags.map(tag => (<span className='d-block'>{tag}</span>)) : ""}
-                                {/* tags should be links  */}
+                                    VideoDetails.snippet.tags.map(tag => (<Link
+                                        to={{
+                                            pathname: '/search/' + tag,
+                                        }}
+                                    > {tag} </Link>)) : ""}
                             </p>
                         </Tab>
                         <Tab className="text-white" eventKey="techinfo" title="Tecnical Informations">
-                            <p><b>Duration: </b>{momentDuration(VideoDetails.contentDetails.duration)}<br />
+                            <p>
+                                <b>Duration: </b>{momentDuration(VideoDetails.contentDetails.duration)}<br />
                                 <b>Definition: </b> {VideoDetails.contentDetails.definition}<br />
                                 <b>Dimension: </b> {VideoDetails.contentDetails.dimension}<br />
                                 <b>Views: </b> {VideoDetails.statistics.viewCount}<br />