如何使用React.js JavaScript在JSX代码中实现数组增量功能

Question

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 render() 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 onClick={Column1.text1=text1val[++] , 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

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 => item.id)
            var text1val = this.state.importData.map(item => item.text1)
            var text2val = this.state.importData.map(item => item.text2)
            var text3val = this.state.importData.map(item => item.text3)

            return(
                <div className="mainBody">
                    <div className="backPain">
                        <div className="holder">
                        <Column1 key={ID[0]} text1={text1val[0]}>
                        </Column1>

                        <div className="rectHolder">
                            <div className="rectForward" onClick={Column1.text1=text1val[++]}
                                <h2>Next</h2>
                            </div>
                            <div className="rectBackward">
                                <h2>Prev</h2>
                            </div>
                        </div>

                        <Column2 key={ID[0]} text2={text2val[0]} text3={text3val[0]}>
                        </Column2>
                        </div>
                    </div>
                </div>
            )
        }
    }

    export default Body;

Thanks so much!

Answer 1

Simple thing i will do is keep an index in state. Than pass a function to next and prev which takes care of changing this index. and will show the values based on current state.

this.state = {
  currentIndex : 0
}

HandleCurrentIndex(type){
  if(type === 'inc'){
    this.setState({currentIndex: this.state.currentIndex++})
  } else {
   this.setState({currentIndex: this.state.currnIndex-1 })
  }
}

 <div className="rectForward" onClick={()=>this.HandleCurrentIndex("inc")}>
     <h2>Next</h2>
  </div>
 <div className="rectBackward" onClick={()=>this.HandleCurrentIndex('dec')}>
     <h2>Prev</h2>
 </div>

On side note:- This is just and example in product you should take care of index going below zero as well index exceeding limits of your data. which in turn will show undefined values. simple thing you should do is whenever it goes out of limit just reset it to default value ( 0 )