title: How to implement an array increment function within JSX code using React.js JavaScript
body: <p>I'm trying to develop a React program that changes information in a component each time the button "rectForward" or "rectBackward" is pressed. I'm passing the information in the form of an array of objects into my Body component from "importData" as seen below. That data is then converted into each object's indvidual data pieces through the map functions listed directly after <code>render()</code> is called. What I want to happen when the rectForward button is pressed is for the "text1" array value in Column1 to incrament by 1. The same happens when rectBackward is pressed, but I want the value to decrement. My primary difficulty is the syntax. As you can see in the statement <code>onClick={Column1.text1=text1val[++]</code>, this was my first attempt at implementing this functionality, but the syntax is definitely incorrect. I was wondering if I could get some help formatting this</p>
  
  <pre><code>import React from "react";
  import "./Body.css";
  import Column1 from "./Body/Column1/Column1";
  import "./Buttons.css";
  import Column2 from "./Body/Column2/Column2";
  import myData from "./myData";
  
      class Body extends React.Component {
          constructor() {
              super()
              this.state = {
                importData: myData
              }
            }
  
          render() {
  
              var ID = this.state.importData.map(item =&gt; item.id)
              var text1val = this.state.importData.map(item =&gt; item.text1)
              var text2val = this.state.importData.map(item =&gt; item.text2)
              var text3val = this.state.importData.map(item =&gt; item.text3)
  
              return(
                  &lt;div className="mainBody"&gt;
                      &lt;div className="backPain"&gt;
                          &lt;div className="holder"&gt;
                          &lt;Column1 key={ID[0]} text1={text1val[0]}&gt;
                          &lt;/Column1&gt;
  
                          &lt;div className="rectHolder"&gt;
                              &lt;div className="rectForward" onClick={Column1.text1=text1val[++]}
                                  &lt;h2&gt;Next&lt;/h2&gt;
                              &lt;/div&gt;
                              &lt;div className="rectBackward"&gt;
                                  &lt;h2&gt;Prev&lt;/h2&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;Column2 key={ID[0]} text2={text2val[0]} text3={text3val[0]}&gt;
                          &lt;/Column2&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              )
          }
      }
  
      export default Body;
  </code></pre>
  
  <p>Thanks so much!</p>