JSFiddle - React, Tailwind, and code Playground

JavaScript

class Timer extends React.Component {
  
  constructor(props){
     super(props);
   
     this.state = {
      count: 5,
      
    }
    
  }
  
  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>
              <button onClick = {this.increment}  >Кнопка</button> // тут onClick = {this.increment} не работает, не определит контекст
              <button onClick = {this.increment.bind(this)}  >Кнопка</button> // однако в таком варианте onClick = {this.increment.bind(this)} уже все хорошо.
              // откуда биндится .bind(this)? 
              //В чем я торможу?
            </div> 
   )}
  
}