tablas - modificar tabla con javascript

Función incrementadora en una matriz.

Question

La función de incremento en el siguiente fragmento incrementa el cuarto elemento, el quinto elemento, luego el último elemento (20)

Mi objetivo es que aumente cada valor numérico desde el cuarto elemento en adelante, omitiendo letras.

Esta es la línea con la que estoy teniendo un problema:

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

¿Cómo puedo alterar esto para lograr mi objetivo?

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>

Answer 1

clicks eran más un índice que un contador de clics, así que lo cambié de nombre a index .

Puede usar expresiones regulares con String#split , por lo que puede combinar .replace(// / /g,'' '').split('' '') en .split(//s+/) .

Moví la declaración de incremento de índice a la función de incremento para simplificar, y agregué una verificación para incrementar el índice nuevamente si el valor no es un número.

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>