Incrementing function in an array

javascript arrays algorithm reactjs increment

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>

Expand snippet