Создать элемент из submit React.js

Если вы хотите, чтобы ваш элемент <h1> отображался вместо формы при успешном завершении, сделайте это в своей функции визуализации:

render() {
return (
  <div>
   {this.state.success?(
    <h1>Success</h1>
   ):(
   <form onSubmit = {this.handleSubmit}>
   <TimeList defaultTime = {this.state.defaultTime}
            handleChangeEvent = {this.handleChangeEvent}/>
  <br/>
  <DateList defaultDate = {this.state.defaultDate}
            handleChangeEvent = {this.handleChangeEvent}/>
  <br/>
  <NumberOfLessons defaultNOL = {this.state.defaultLessons}
            handleChangeEvent = {this.handleChangeEvent}/>
  <br/>
    <input type = "submit" value = "Book Lesson" />
  </form>
  <br/>)}
  </div>
);
}

Я думаю, что лучший способ справиться с этим - использовать состояние для управления отображением заголовка «Успех». Вы можете добавить следующую строку кода в то место, куда хотите добавить заголовок:

{this.state.success && <div> Successful </div> }

Я думаю, причина, по которой тег html, возвращаемый handleSubmit в вашей функции, не отображается, заключается в том, что, хотя он возвращает тег, он не знает, куда его поместить. Если вы хотите, чтобы это работало, вам нужно использовать такие методы, как createElement и appendChild, но реакция должна работать не так.