Как реализовать функцию приращения массива в коде JSX, используя React.js JavaScript

Question

Я пытаюсь разработать программу React, которая изменяет информацию в компоненте каждый раз, когда нажимается кнопка «rectForward» или «rectBackward». Я передаю информацию в виде массива объектов в компонент Body из "importData", как показано ниже. Затем эти данные преобразуются в отдельные фрагменты каждого объекта с помощью функций карты, перечисленных непосредственно после вызова render(). Я хочу, чтобы при нажатии кнопки rectForward значение массива «text1» в Column1 увеличивалось на 1. То же самое происходит при нажатии rectBackward, но я хочу, чтобы значение уменьшилось. Моя основная трудность - это синтаксис. Как вы можете видеть в утверждении onClick={Column1.text1=text1val[++], это была моя первая попытка реализовать эту функцию, но синтаксис определенно неверный. Мне было интересно, смогу ли я получить помощь в форматировании этого

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;

Большое спасибо!

Answer 1

Простая вещь, которую я сделаю - это сохранить индекс в состоянии.Чем передать функцию next и prev, которая позаботится об изменении этого индекса.и покажет значения, основанные на текущем состоянии.

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>

Примечание на стороне: - Это просто и пример, в продукте вы должны позаботиться о том, чтобы индекс был ниже нуля, а индекс превышалпределы ваших данных.который в свою очередь покажет неопределенные значения.простая вещь, которую вы должны сделать, когда она выходит за пределы, просто сбросьте ее на значение по умолчанию (0)