Как вернуть тег HTML <div> из функции javascript в React?

Значение возвращается, но фреймворк/браузер/и т.д. нет причин что-либо делать с этим значением.

Попробуйте подумать об этом по-другому, «более React». Вы не хотите возвращать значение для рендеринга, вы хотите состояние обновления. Что-то вроде этого:

constructor() {
  super();

  this.state = {
    blockno:0,
    showDiv: false // <-- note the new property in state
  }
}


OnButtonClick = () => {
  this.setState({blockno: this.state.blockno + 1, showDiv: true})
}

Теперь вы ничего не возвращаете, а обновляете состояние компонента. Затем в вашем методе render вы условно визуализируете пользовательский интерфейс на основе текущего состояния:

render() {
  return(
    <div>
        <Button onButtonClick = {this.OnButtonClick}/>
        {
            this.state.showDiv
              ?
                <div>
                  <h3>Some text</h3>
                </div>
             : ''
        }
    </div>
    );
}

Обработчик кликов не изменяет страницу, он просто изменяет состояние компонента, который вы пишете. Метод render отвечает за отрисовку пользовательского интерфейса на основе этого состояния. Каждый раз, когда состояние изменяется, render будет вызываться снова для повторного рендеринга вывода.

(Примечание: не на 100% ясно, является ли это точно той функциональностью, которую вы ищете в пользовательском интерфейсе, поскольку на самом деле неясно, что вы пытаетесь создать. Но суть здесь в том, чтобы проиллюстрировать, как обновлять состояние и отображать вывод. в React. Ваша логика может быть изменена по мере необходимости.)

Вы должны сделать рендер на основе вашего состояния. Пожалуйста, ознакомьтесь с учебным пособием в документации по реакции, чтобы узнать больше о том, как работает React. Это действительно хорошо

Вот версия вашего кода, которая работает. Надеюсь, поможет

class App extends Component {
  constructor() {
    super();

    this.state = {
      blockno: 0
    };
  }

  OnButtonClick = () => {
    //updates the states
    this.setState({ blockno: this.state.blockno + 1 });
  };
  //remember: every time there is an update to the state the render functions re-runs
  render() {
    //variable holding the blocks in an array
    let blocks = []
    //if blockno is greater than 0, it checks everytime that there is a state change
    if (this.state.blockno > 0) {
      //for every block added
      for (let index = 0; index < this.state.blockno; index++) {
        //We`re going to add to the array of blocks a new div with the block number
        blocks.push(
          <div>
            <h3>My block number is {index}</h3>
          </div>
        );
      }
    }
    return (
      <div>
        <div>
          {/**button that updates the state on every click */}
          <button onClick = {this.OnButtonClick}>
            Click me to add a new div!
          </button>
        </div>
        {/**This render the blocks variable that holds the divs */}
        {blocks}
      </div>
    );
  }
}

Я вижу, что вы пытаетесь построить счетчик. Значение, которое вы возвращаете из функции обработчика кликов, не может быть отображено, вместо этого вам нужно управлять им в функции рендеринга следующим образом:

    class App extends Component {
      constructor() {
        super();

        this.state = {
          blockno: 0
        }
      }


      OnButtonClick = () => {
        this.setState(prevState => ({ blockno: prevState.blockno + 1 }));
      }


      render() {
        return(
          <div>
            {this.state.blockno > 0 && <div>some text {this.state.blockno}</div>}
            <Button onButtonClick = {this.OnButtonClick} />
          </div>
        );
      }
    }

Также обратите внимание, что метод setState является асинхронным, прочитайте документацию https://reactjs.org/docs/react-component.html#setstate