Приращение функции в массиве

Функция приращения в следующем фрагменте увеличивает четвертый элемент, пятый элемент, затем последний элемент (20)

Моя цель состоит в том, чтобы он увеличивал каждое числовое значение от четвертого элемента вперед, пропуская буквы.

Это строка, с которой у меня возникла проблема:

const indexAlteredElement = (clicksModulo) => (! clicksModulo % 3) ? 20 : clicksModulo+3;

Как я могу изменить это, чтобы достичь своей цели?

JSBin

let clicks = 0;
class App extends React.Component { 
    state = {
        data:'M 175 0  L 326.55444566227675 87.50000000000001  L 326.55444566227675 262.5  L 175 350  L 23.445554337723223 262.5  L 23.44555433772325 87.49999999999999 L 175 0'
    };

    onClick() {
      clicks ++;
      this.setState({data: this.increment()}); 
    }

    /**
     * clicks  ->   Element index in array
     *    1    ----- ->4, 
     *    2    ---- -> 5.
     *    3    ---- -> 7.

     *    4    ----- ->4, 
     *    5    ---- -> 5.
     *    6    ---- -> 7.
     */
    increment() {
      const data = this.state.data.replace(/\ \ /g, " ").split(" ");
      const indexAlteredElement = (clicksModulo) => (! clicksModulo % 3) ? 20 : clicksModulo+3;               
      return data.map((e, i) => (i === indexAlteredElement(clicks%3)) ? parseInt(e)+5 : e ).join(' ')  
    }
    
    render() {
      return (
        <div>
           <div>{this.state.data} </div>
            <button onClick={this.onClick.bind(this)} style={{fontSize:20}}> Click me </button>  
        </div>
      )
    }
}

ReactDOM.render(<App />,  document.querySelector('.container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<section class="container"></section>

Ответ 1

clicks был скорее индексом, чем кликом, поэтому я переименовал его в index.

Вы можете использовать регулярные выражения с String#split, поэтому вы можете объединить .replace(/\ \ /g,' ').split(' ') в .split(/\s+/).

Я переместил оператор инкремента индекса в функцию приращения для простоты и добавил проверку, чтобы снова увеличить индекс, если значение не является числом.

let index = 2;
class App extends React.Component {
    state = {
        data: 'M 175 0  L 326.55444566227675 87.50000000000001  L 326.55444566227675 262.5  L 175 350  L 23.445554337723223 262.5  L 23.44555433772325 87.49999999999999 L 175 0'
    };

    onClick() {
      this.setState({data: this.increment()}); 
    }

    increment() {
      const data = this.state.data.split(/\s+/);
      if(!(++index % 3)) ++index;
      if(index % data.length < 3) index = index + (index % data.length) + 2;
      return data.map((e, i) => i === index % data.length? parseInt(e) + 5 : e ).join(' ');
    }
    
    render() {
      return (
        <div>
           <div>{this.state.data} </div>
            <button onClick={this.onClick.bind(this)} style={{fontSize:20}}> Click me </button>  
        </div>
      )
    }
}

ReactDOM.render(<App />,  document.querySelector('.container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<section class="container"></section>