Incrementing function in an array

Question

The increment function in the following snippet increments the fourth element, the fifth element, then the last element (20)

My goal is for it to increment every number value from the fourth element onward, skipping letters.

This is the line that I'm having a problem with:

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

How can I alter this to achieve my goal?

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>

Gibrian

Answer 1

clicks was more of an index than it was a clicks counter, so I renamed it to index.

You can use regular expressions with String#split, so you can combine .replace(/\ \ /g,' ').split(' ') into .split(/\s+/).

I moved the index increment statement into the increment function for simplicity, and added a check to increment the index again if the value is not a number.

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>

Staircase