JSFiddle - React, Tailwind, and code Playground

JavaScript

class Timer extends React.Component {
  
  constructor(props){
     super(props);
   
     this.state = {
      count: 5,
      
    }
    
    this.increment = this.increment.bind(this) // тут я кажется понял что к чему -мы биндим метод из прототатипа к this экземпляра класса, и по итогу метод самого элемента уже привязан к нему (к его this) биндом, и вызовется  из любого вызова функции, даже если функция сама не привязанна ни к какому this 
    
  }
  
  increment(){ // вот метод, и он в прототипе, поэтому вызывается через this, т.е. через экземпляр класса
      console.log(this) 

  }
  
  
  	

  render(){ //метод рендер тоже в прототипе и тоже через this вызывается
        //this передается внутрь метода рендер
        return (
   					// мы создаем элементы jsx-ом,но по факту это все выглядит как:
            //React.createElement('div', {name: 'name', age : 31 }, 'www') тоесть по итогу метод 											this.increment вызывается внутри 
            //React.createElement() и соответственно не получает свой this - так получается?
            <div>
              <span>{this.state.value}</span> 
              //следуя моей логике this.state.value тоже не должен определиться, так как внутрь функции 								<span> this не передан. Однако тут все отлично определяется.
              
              <p>2222</p>
              // тут onClick = {this.increment} не работает, не определит контекст (теперь определит так 								как this.increment определен в конструкторе четко)
              <button onClick = {this.increment}  >Кнопка</button>
              
              
              // но остается вопрос почему в выражении {this.increment.bind(this)} тоже все работает?
        			//ведь в функцию <button/> this никак не передан
              //что за фигня?
              <button onClick = {this.increment.bind(this)}  >Кнопка</button> 
              // откуда биндится .bind(this)? 
              //В чем я торможу?
            </div> 
   )}
  
}