I don’t understand the errors I’m getting in trying to render a React component composed of child components.
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.