JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bob" style="height:200px;width:200px;background-color:red" ></div>

<div id="adam" style="height:200px;width:200px;background-color:blue" onclick="alert('yo')" ></div>

<div id="iris" style="height:200px;width:200px;background-color:green" onclick="alert('boo')" ></div>

JavaScript

var div = document.getElementById("bob");
div.addEventListener("click", function(){alert('foo');});

// all tests fail    
//div.click();
//div.onclick();
//div.onClick();

var div2 = document.getElementById("adam");
// works
//div2.onclick();

var div3 = document.getElementById("iris");
div3.onclick = function(){alert('wat');};
// works
//div3.onclick();

//How do I trigger the div "click" event?