Cannot Solve: Map an array of objects to a button element

JavaScript
1

Tell us what’s happening:
Hi,
So I facing difficulty in creating an a set of buttons using the map method. What I have done is create an array of objects with the button id, src etc and would like to map this array on to my buttons.

Here’s my code so far:
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;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36.

Challenge: Build a Drum Machine

Link to the challenge:

2

  1. The sounds array is not on the object (inside the class), this inside the class is not pointing to the array outside. Just use sounds.map

  2. The properties on the objects inside the array are being accessed incorrectly. You are using id and idnum like they were variables, you have to use strings or use dot notation (e.g. info["id"] or info.id)

  3. You are returning an object, use return ( buttonData ) instead, or use the syntax shown at the bottom of this page.

1 Like
3

Hi,

Thanks for the help!
Really saved me. I was breaking my head for over hours on this one.

4

Glad to help, happy coding!

1 Like