JSFiddle - React, Tailwind, and code Playground

by DarMontou

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>

CSS

/*
  Task: Extend the samples component below to better handle images
  
  Reasoning: One of our components provides a view into running samples
  using images fetched from our servers. Users are able to monitor running
  samples in bulk from this component.
  
  Please demonstrate your knowledge of the react component by making a few 
  small changes to the components below.
  
  Todos:
  
    1 - Render the SampleTable component under the Recent Samples header text
    2 - Modify the Sample component to use the splashScreen as the src
    3 - Write a method to update the Samples component state when the
        imageLinks are returned by the API (see fetchImages)
    4 - Modify the Sample component to render the href prop as the img src
        when the href is available
    5 - add an onError handler to the img element to use the failscreen
        as the src for the image if the image fails to laod
*/

React

import React, { useState } from "react";
import ReactDOM from "react-dom";

// images are used as the sample list and returned by the echo API in fetchImages
const images = [
"https://images.techhive.com/images/article/2014/04/windows-7-default-desktop-100259456-orig.jpg",
"https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwik_MfgmfXeAhUHC6wKHYYzATQQjRx6BAgBEAU&url=https%3A%2F%2Fwindowsreport.com%2Fwindows-10-best-themes%2F&psig=AOvVaw2Ya2DbVOJ3NC7hO2_xymip&ust=1542754680354456",
"http://cdn0.vox-cdn.com/uploads/chorus_asset/file/2363952/win10filexplorer.0.png",
"https://images.techhive.com/images/article/2015/07/windows-10-hidden-narwhal-100598366-orig.jpg",
"https://cdn.windowsreport.com/wp-content/uploads/2015/12/best-windows-10-themes-10.png",
"https://upload.wikimedia.org/wikipedia/commons/c/cb/Fedora-Core-6-AIGLX.png",
"https://upload.wikimedia.org/wikipedia/commons/f/fd/Compiz-fusion.png",
"https://upload.wikimedia.org/wikipedia/commons/2/2a/Stumpwm.png",
"https://camo.githubusercontent.com/a0f864729cb308e8546bde467445dafbd71ce7ed/687474703a2f2f6c676172632e6e61726f642e72752f706963732f7877656d2f7877656d2d322e312e706e67",
"https://i.warosu.org/data/g/img/0636/55/1512238669552.png",
"http://i.imgur.com/Q6yFbn0.png",
"https://www.kali.org/wp-content/uploads/2016/08/e17-1024x768.png"
];

const splashScreen = "https://tr3.cbsistatic.com/hub/i/2010/06/16/093a741b-c3b0-11e2-bc00-02911874f8c8/435248.jpg";

const failScreen = "https://upload.wikimedia.org/wikipedia/commons/5/5b/Windows_9x_Blue_Screen_of_Death_recreated_in_Fixedsys.svg"

const noImageAvailable = "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/No_image_3x4.svg/1024px-No_image_3x4.svg.png"

const height = "112", width = "150";

const fetchImages = (successCallback, errorCallback) => {
   $.ajax({
     cache: false,
     url: "/echo/json",
     method: "POST",
     data: {
       json: JSON.stringify(images),
       delay: 1
     },
     dataType: 'json',
    ...