Как вставить HTML элемент jsx в реакцию

Question

Я пытался создать форму для входа в систему, чтобы при нажатии на кнопку регистрации кнопка регистрации становилась значком загрузки, а если она получает ответ false от сервера, она загружает кнопку снова вместо загрузки счетчика, но у меня возникла проблема, что он показывает [объект объекта] вместо кнопки, когда он должен удалить загрузочный счетчик и снова показать кнопку регистрации (используя innerHTML), так что вот оператор, который я использовал для рендеринга кнопки , счетчик:

     onSubmit = () => {
            document.getElementById('error-alert').innerHTML = "";
            document.getElementById('sumbit-btn').innerHTML = ` //rendering the loading spinner
            <span class="btn btn-light border-1 border-dark mdi mdi-loading mdi-spin mdi-24px"></span>`;
            fetch("my server link here", {
              method: 'post',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({
                email: this.state.email,
                password: this.state.password,
                name: this.state.name
              })
            })
              .then(response => response.json())
              .then(user => {
                if (user.id) {   // if the input is correct (response true from the server)
                  this.props.loadUser(user)
                  this.props.onRouteChange('home');
}



 else {  //if the response is false from the server


    ///////////////   this is the innerHTML i mean:   //////////
                  document.getElementById('sumbit-btn').innerHTML =
                    <div
                      className="btn btn-light border-1 border-dark"
                      onClick={this.onSubmit}
                    >Register
                  </div>
    ///////////////////////////////////////////////////////////

                }
              })
          }

обратите внимание, что этот кодовый блок находится за пределами render(){}

Answer 1

Я думаю, что самым простым способом было бы сохранить логическое значение в состоянии и затем сделать троичный в рендере. Измените логическое значение в зависимости от ваших потребностей.

 onSubmit = () => {
        document.getElementById('error-alert').innerHTML = "";
        this.setState({showLoading: true});
        <span class="btn btn-light border-1 border-dark mdi mdi-loading mdi-spin mdi-24px"></span>`;
        fetch("my server link here", {
          method: 'post',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            email: this.state.email,
            password: this.state.password,
            name: this.state.name
          })
        })
          .then(response => response.json())
          .then(user => {
            if (user.id) {   // if the input is correct (response true from the server)
              this.props.loadUser(user)
              this.props.onRouteChange('home');
 } else {
   this.setState({showLoading: false});
}
render(){
   return(
     <div>{show ? 
                    <Loading/> 
                    :
                    <div
                      className="btn btn-light border-1 border-dark"
                      onClick={this.onSubmit}
                    >Register
                  </div>
          }
  )
}