как оживить с помощью ванили JS л oop с процентами?

Question

Привет, я занимаюсь практикой React и использую Vanilla JS для анимации элемента с помощью al oop. По сути, при нажатии на div, div будет перемещаться горизонтально слева направо. Тем не менее, я столкнулся с некоторыми проблемами, которые не отображаются в браузере, поэтому я понятия не имею, что пошло не так с моим кодом.

Конечно, если есть способ «Реагировать» на его анимацию, я бы люблю учиться. Спасибо за любую помощь!

Данная функция называется jacob.

Вот код: Реакция:

import React, { Component } from "react";

class Forma extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ""
    };
  }

  changeHandle = event => {
    this.setState({
      name: event.target.value
    });
  };

  **swipe = () => {
    function jacob() {
      var geo = -75 + "%";
      var train = setInterval(jacob, 3);
      var gee = document.querySelectorAll(".cover")[0];
      if (gee.style.marginLeft === -75 + "%") {
        gee.style.marginLeft++;
        gee.style.marginLeft = geo + "%";
      } else if (gee.style.marginLeft === 0 + "%") {
        clearInterval(train);
      }
    }
    jacob();
  };**

  render() {
    return (
      <form>
        <div className="king">
          <div className="cont">
            <h1>FirstAttempt</h1>

            <div className="cover">
              <h2 className="leaf" onClick={this.swipe}>
                Enter
              </h2>
              <h2>What is your name?</h2>
              <input
                type="text"
                placeholder=" e.g. Tim"
                value={this.state.name}
                className="jobs"
                onChange={this.changeHandle}
              />
            </div>
          </div>
        </div>
      </form>
    );
  }
}
export default Forma;