Problems getting React working in Drum Machine project

Problems getting React working in Drum Machine project
0

#1

I don’t understand the errors I’m getting in trying to render a React component composed of child components.

link to codepen

Errors:

The above error occurred in the component:
in DrumMachine
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
Error: Objects are not valid as a React child (found: object with keys {drumPads}). If you meant to render a collection of children, use an array instead.
in DrumMachine
Error: Inserting collapsed marker partially overlapping an existing one

If I try to render a single DrumPad React Component inside of DrumMachine (<DrumPad keyCode='q' sound=''/>), it works fine. If I try to render an array of them like the freeCodeCamp challenge “Use array.map() to dynamically render elements”, I get the above errors.

Ultimately, I’d like to render 3 items from the drumPads array, then a line break, then 3 more items, then a line break, but I couldn’t figure out how to do that in jsx, and I was stuck on the above errors of just rendering the array first.

Any advice would be appreciated.


#2

The error pretty much tells you everything you need to know. DRUM_PADS is an object and in order to use map you need an array. Shouldn’t be too hard to make the change.


#4

The render() for DrumMachine was just returning {drumPads}, an array of React objects. Wrapping it in a div (<div>{drumPads}</div>) made it work.