JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text-center">
<ul id="feed" class="list-group"></ul>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

JavaScript

$(function() {
    var baseUrl = "https://api.themoviedb.org/3/movie/";
    /*I NEED TO MOVE THE BELOW API KEY INTO THE BACKEND!!!*/ 
    var apiKey = "?language=en-US&include_adult=false&api_key=45ddf563ac3fb845f2d5c363190d1a33"; //Include adult = false still shown pornographic material?
    var rng = (Math.floor(Math.random() * 520271) + 1);
    var APIurl = baseUrl + rng + apiKey;
    console.log("Url it is loading the data from: " + APIurl);// for testing / debugging
    fetch(new Request(APIurl))
      .then(response => {
        if (response.status === 200) return response.json();
        else throw new Error('No film found or no response from the API server!!!');
      })
      .then(feed => {
        let item = '<li class="list-group-item">';
        item += '<img class="center-block img-fluid" alt="Movie Poster Image" src="' + 'http://image.tmdb.org/t/p/w500' + feed.poster_path + '" alt="">'
        console.log("Full image path: " + 'http://image.tmdb.org/t/p/w500' + feed.poster_path); // for testing / debugging
        item += '<br>' + '<br>' + '<strong>' +"Title of film / movie: " + '</strong>' + feed.title;
        console.log("Title of film / movie: " + feed.title); // for testing / debugging
        item += '<br>' + '<br>' + '<strong>' + "Overview / description of film: " + '</strong>' + feed.overview;
        console.log("Overview / description of film: " + feed.overview)
        
        
        let genre = feed.genres.length ? feed.genres[0].name : '';

		if (genre) {
		item += '<br>' + '<br>' + '<strong>' + "Genre of film / movie: " + '</strong>' +  feed.genres[0].name;
		console.log("Genre of film / movie: " + feed.genres[0].name);
		} else {
		item += '<br>' + '<br>' +  '<strong>' + "No genre defined: " + '</strong>' + "undefined";
		console.log("No genre defined (undefined)");
		}

        

        item += '</li>';

        $('#feed').append(item);
      });
  });