Не удается решить: сопоставить массив объектов с элементом кнопки (React)

Question

Так что я столкнулся с трудностью при создании набора кнопок с использованием метода карты. Я создал массив объектов с идентификатором кнопки sr c et c и хотел бы сопоставить этот массив с моими кнопками.

Он сообщает, что переменная не определена, и выбрасывает ошибка. Любая помощь будет принята с благодарностью.

Вот мой код:

import React from "react";
import ReactDom from "react-dom";

const sounds = [
  {
    idnum: "1",
    id: "Q",
    src: "1.html",
  },
  {
    idnum: "1",
    id: "W",
    src: "",
  },
  {
    idnum: "1",
    id: "E",
    src: "",
  },
  {
    idnum: "1",
    id: "A",
    src: "",
  },
  {
    idnum: "1",
    id: "S",
    src: "",
  },
  {
    idnum: "1",
    id: "D",
    src: "",
  },
  {
    idnum: "1",
    id: "Z",
    src: "",
  },
  {
    idnum: "1",
    id: "X",
    src: "",
  },
  {
    idnum: "1",
    id: "C",
    src: "",
  },
];

class Button extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const buttonData = this.sounds.map((info) => (
      <button>
        {info[id]}+{info[idnum]}
      </button>
    ));

    return { buttonData };
  }
}
export default Button;

Спасибо!

Answer 1

Неправильный способ доступа, либо используйте строку в скобках использования. (Точка) оператор.

render() {
    const buttonData = this.sounds.map((info) => (
      <button>
        {info.id}+{info.idnum}
      </button>
    ));

    return { buttonData };
  }

Или

render() {
    const buttonData = sounds.map((info) => (
      <button>
        {info["id"]}+{info["idnum"]}
      </button>
    ));

    return { buttonData };
  }

Весь: https://codepen.io/deepakshrma/pen/ZEbYBPm?editors=1111

// import React from "react";
// import ReactDom from "react-dom";

const sounds = [
  {
    idnum: "1",
    id: "Q",
    src: "1.html",
  },
  {
    idnum: "1",
    id: "W",
    src: "",
  },
  {
    idnum: "1",
    id: "E",
    src: "",
  },
  {
    idnum: "1",
    id: "A",
    src: "",
  },
  {
    idnum: "1",
    id: "S",

    src: "",
  },
  {
    idnum: "1",
    id: "D",
    src: "",
  },
  {
    idnum: "1",
    id: "Z",
    src: "",
  },
  {
    idnum: "1",
    id: "X",
    src: "",
  },
  {
    idnum: "1",
    id: "C",
    src: "",
  },
];

class Button extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const buttonData = sounds.map((info, i) => (
      <button>
        {info["id"]}+{info["idnum"]}
      </button>
    ));
    return (<>{buttonData}</>)
  }
}
ReactDOM.render(
  <Button />,
  document.getElementById('root')
);