JSFiddle - React, Tailwind, and code Playground
by DarMontou
HTML
<div id="app"></div>
React
/*
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 lifecycle by
making a few small changes to the components below.
Todos:
1 - Render the SampleTable component under the Sample header text
2 - Modify the Sample component to use the splashScreen if no href is
provided, and to use the href otherwise
3 - Write a function to update the Samples component state when the
imageLinks are returned by the API
4 - add an onError handler to the img element to use the failscreen
as the src for the image
*/
const images = [
"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 fetchImages = (successCallback, errorCallback) => {
$.ajax({
cache: false,
...