Menu
Here the Array[i]++ increments the value of the element array[i] , but array[i++] increments the i value which effects or changes the indication of the array element (i.e. it indicates the next element of an array after array[i] ).
Note: The increment/decrement operators only affect numbers and strings. Arrays, objects, booleans and resources are not affected.
To increment the values in an array, use the map() method to iterate over the array and on each iteration return the value, e.g. arr. map(element => element + 1) . The map() method will return a new array that contains the incremented values.
First, Initializing the array arr[] with pre-defined values, and after that, the length of the array should be calculated. Then use a loop, to perform the operation that is to increment the values one by one with the help of for loop.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With