JSFiddle - React, Tailwind, and code Playground

by João Vitor Scheuermann

HTML

<div class='content-container'>
  <div id='btn' class='btn'></div>
  <div id='btn-2' class='btn-2'>st1</div>
  <div id='btn-3' class='btn-3'>st2</div>
</div>

CSS

.btn{
   position: relative;   
   height: 30px;
   width: 60px;
   background-color: #4CAF50;
   float: left;
}
.btn-2{
   position: relative;   
   height: 30px;
   width: 60px;
   background-color: #FFEB3B;
   float: left;
}
.btn-3{
   position: relative;   
   height: 30px;
   width: 60px;
   background-color: #795548;
   float: left;
}

JavaScript

function teste () {
	this.state = undefined;  
  const states = {
   br: {
    onClick: (e)=> {
    	if(e.target.id == 'btn') {console.log('btn')};
  		if(e.target.id == 'btn-2') {console.log('btn-2')};
  		if(e.target.id == 'btn-3') {this.changeState('hue');console.log('trocou');};
    }
   },
   hue: {
   	 onClick: (e)=> {
    	if(e.target.id == 'btn') {console.log('hue btn')};
  		if(e.target.id == 'btn-2') {console.log('hue btn-2')};
  		if(e.target.id == 'btn-3') {this.changeState('br');console.log('trocou');};
    }
   }  	
  }
  
  
  
  this.changeState = (string) => {  	
    if(string == 'br' && this.state !== states.br){     
      this.state = states.br
    }     
    if(string == 'hue' && this.state !== states.hue){     
      this.state = states.hue
    } 
  }
}

const testao = new teste();
testao.changeState('br');

$('body').click((e)=> {
	//console.log(e);  
  testao.state.onClick(e); 	
})