Problems getting React working in Drum Machine project

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

link to codepen


The above error occurred in the component:
in DrumMachine
Consider adding an error boundary to your tree to customize error handling behavior.
Visit 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 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.

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.

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