vendredi 15 février 2019

Is there a way to simplify long list of code inside state in React.js

I have an Image slider{Carousel} that has its own texts and the texts is sliding in from left and right. I accomplished this by adding each effect in the state using if statement inside interval but the code is really long and there has to be a way to make this with less code. thanx in advance.

State

 constructor(props) {
    super(props);
    this.state = {
      width: 0,
      animateLeftOne: "",
      animateLeftTwo: "",
      animateLeftThree: "",
      animateLeftFour: "",
      animateLeftFive: "",
      animateLeftSix: "",
      animateLeftSeven: "",
      animateLeftEight: "",
      animateLeftNine: "",

      animateRightOne: "",
      animateRightTwo: "",
      animateRightThree: "",
      animateRightFour: "",
      animateRightFive: "",
      animateRightSix: "",
      animateRightSeven: "",
      animateRightEight: "",
      animateRightNine: ""
    };
  }

ComponentDidMount

  componentDidMount() {
    this.sliderwidth();
    this.showAnime();
    const wow = new WOW();
    wow.init();
  }

Method

showAnime = () => {
    let counter = 0;
    setInterval(() => {
      counter++;
      if (counter === 0) {
        this.setState({
          animateLeftOne: "animated fadeInLeftBig delay-one",
          animateRightOne: "animated fadeInRightBig delay-one"
        });
      } else if (counter === 1) {
        this.setState({
          animateLeftTwo: "animated fadeInLeftBig delay-two",
          animateRightTwo: "animated fadeInRightBig delay-two"
        });
      } else if (counter === 2) {
        this.setState({
          animateLeftThree: "animated fadeInLeftBig delay-three",
          animateRightThree: "animated fadeInRightBig delay-three"
        });
      } else if (counter === 3) {
        this.setState({
          animateLeftFour: "animated fadeInLeftBig delay-four",
          animateRightFour: "animated fadeInRightBig delay-four"
        });
      } else if (counter === 4) {
        this.setState({
          animateLeftFive: "animated fadeInLeftBig delay-five",
          animateRightFive: "animated fadeInRightBig delay-five"
        });
      } else if (counter === 5) {
        this.setState({
          animateLeftSix: "animated fadeInLeftBig delay-six",
          animateRightSix: "animated fadeInRightBig delay-six"
        });
      } else if (counter === 6) {
        this.setState({
          animateLeftSeven: "animated fadeInLeftBig delay-seven",
          animateRightSeven: "animated fadeInRightBig delay-seven"
        });
      } else if (counter === 7) {
        this.setState({
          animateLeftEight: "animated fadeInLeftBig delay-eight",
          animateRightEight: "animated fadeInRightBig delay-eight"
        });
      } else if (counter === 8) {
        this.setState({
          animateLeftNine: "animated fadeInLeftBig delay-nine",
          animateRightNine: "animated fadeInRightBig delay-nine"
        });
      } else if (counter === 9) {
        counter = 0;
        this.setState({
          animateLeftOne: "",
          animateLeftTwo: "",
          animateLeftThree: "",
          animateLeftFour: "",
          animateLeftFive: "",
          animateLeftSix: "",
          animateLeftSeven: "",
          animateLeftEight: "",
          animateLeftNine: "",

          animateRightOne: "",
          animateRightTwo: "",
          animateRightThree: "",
          animateRightFour: "",
          animateRightFive: "",
          animateRightSix: "",
          animateRightSeven: "",
          animateRightEight: "",
          animateRightNine: ""
        });
      }
    }, 7000);
  };

Aucun commentaire:

Enregistrer un commentaire