JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">

		<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.ui.commons,sap.m,sap.ui.table"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
				sap.ui.localResources("learning");
				var view = sap.ui.view({id:"idfirst1", viewName:"learning.first", type:sap.ui.core.mvc.ViewType.JS});
				view.placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

JavaScript

sap.ui.core.Control.extend("mycustom",{
	metadata : {
		
			properties : {
				
				name : "string"	,	//setter and getters are created 
				myarr : { type: 'object',
		                defaultValue: [] }
			}
		
		
		
	},
	
	renderer : function(oRm,oControl){	// static function, so use the given "oControl" instance 
        								// instead of "this" in the renderer function
		
		//oRm.write("<span>Hello ");
		//oRm.write("<div>")

        oRm.write("<div"); 
        oRm.writeControlData(oControl); 	//writes the Control ID and enables event handling - important! 
        									//If you dont write this, onCLick will not get called

        oRm.write(">");
        oRm.writeEscaped(oControl.getMyarr().toString()); // write the Control property 'name', with XSS protection
        //oRm.write("</span>");
        oRm.write("</div>");
	},
	
	onclick : function(evt) {   // is called when the Control's area is clicked - no event registration required
        alert("Control clicked! Text of the Control is:\n" + this.getMyarr());
    },
		
	
		
		
		
		
	});
	
	

	var myControl = new mycustom({name:"my first custom control",
	myarr : ["val1","val2","val3"]	
	});
	myControl.placeAt("content");