Q: 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
  class Showcase extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

ComponentDidMount
  defaultState() {
    const arr = [
      "One",
      "Two",
      "Three",
      "Four",
      "Five",
      "Six",
      "Seven",
      "Eight",
      "Nine"
    ];
    const dir = ["Right", "Left"];
    const obj = { width: 0 };
    for (let i = 0; i < dir.length; i++) {
      for (let k = 0; k < arr.length; k++) {
        obj[`animate${dir[i]}${arr[k]}`] = "";
      }
    }
    return obj;
  }
  componentDidMount() {
    console.log(this.state);
    console.log(this.defaultState());
    this.sliderwidth();
    this.showAnime();
    const wow = new WOW();
    wow.init();
  }

Method
  showAnime = () => {
    const arr = [
      "One",
      "Two",
      "Three",
      "Four",
      "Five",
      "Six",
      "Seven",
      "Eight",
      "Nine"
    ];
    let counter = 0;
    setInterval(() => {
      counter++;
      if (counter === 9) {
        this.setState(this.defaultState());
      } else {
        const state = this.state;
        state[
          `animateLeft${arr[counter]}`
        ] = `animated fadeInLeftBig delay-${arr[counter].toLowerCase()}`;
        state[
          `animateRight${arr[counter]}`
        ] = `animated fadeInRightBig delay-${arr[counter].toLowerCase()}`;
        this.setState(state);
      }
    }, 7000);
    console.log(this.state);
  };

  sliderwidth = () => {
    setInterval(() => {
      const slide = this.state.width + 100;
      this.state.width === 800
        ? this.setState({
            width: 0
          })
        : this.setState({
            width: slide
          });
    }, 7000);
  };


A: Ok here is the code. Simple idea is to create an array of numbers like ['One','Two'...].
Way to create default state


function defaultState(){
       const arr = ['One','Two','Three','Four','Five','Six','Seven','Eight','Nine'];
       const dir = ['Right','Left']
       const obj = {width:0}
       for(let i = 0;i<dir.length;i++){
        for(let k = 0;k<arr.length;k++){  
       obj[`animate${dir[i]}${arr[k]}`] = '';
        }
       }
       return obj;
      }
console.log(defaultState())


showAmine Function
showAnime = () => {
    const arr = ['One','Two','Three','Four','Five','Six','Seven','Eight','Nine'];
    let counter = 0;
    setInterval(() => {
      counter++;
      if(counter === 9){
          this.setState(defaultState());
      }
      else{
          const state = this.state;
          state[`animateLeft${arr[counter]}`] = `animated fadeInLeftBig delay-${arr[counter].toLowerCase()}`
          state[`animateRight${arr[counter]}`] = `animated fadeInRightBig delay-${arr[counter].toLowerCase()}`
          this.setState(state)
      }
    }, 7000);
  };

