Изменение массива с данными через кликабельный массив

Question

Есть массив с данными

const array = [
  { questions: [
      {text: "Трехфазный"},
      {text: "Управляемый"}
    ]
  }
]

и массив с кнопками (кликабельными изображениями)

const buttons = [
  <img className='button1' src='1.svg'></img>,
  <img className='button2' src='2.svg'></img>
]

Как при нажатии на первый элемент массива buttons менять свойства первого поля text ("Трехфазный"), например, сделать это поле красным, а при нажатии на второй элемент массива buttons менять аналогичные свойства второго поля text ("Управляемый")?

В общем случае, как менять при нажатии на i-ый элемент массива buttons i-ое поле text?

Хочу что-то вроде

<div onClick={() => {

  }
 }
>
  {buttons}
</div>

или через Array.prototype.map(). Если знаете другие способы, поделитесь, пожалуйста.

Answer 1

const handleButtonClick = (index) => {
  const textElement = document.querySelectorAll('.questions')[index].querySelector('.text');
  textElement.classList.add('red-text');
}

const array = [
  {
    questions: [
      {text: "Трехфазный", class: ""},
      {text: "Управляемый", class: ""}
    ]
  }
]

const buttons = [
  <img className='button1' src='1.svg' onClick={() => handleButtonClick(0)}></img>,
  <img className='button2' src='2.svg' onClick={() => handleButtonClick(1)}></img>
]

БЛОГ НА HUSL

Изменение массива с данными через кликабельный массив

Ответы (1 шт):