"Objects are not valid as a React child" Drum Machine project

Hello! I’ve been stuck for a few days with this issue and I haven’t been able to solve it.
Here’s the CodeSandbox link:

The issue

Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}).

I created a component named DrumPad, and then I created another one called Soundboard where I used a map function to go through the array of sounds and that way creating an array of drumpads. Then, in the Soundboard component I returned a div containing that previous array.

The problem is that now I get that error mentioned above. I was trying to figure out if maybe I was using map the wrong way, or maybe it was wrong to put components in an array, but I looked at this: React Map - javatpoint and in the second example they do the same thing. I’ve been reading and trying things for a couple of days and I still can’t figure out how to solve this. I’m not sure what I’m doing wrong.

The odd thing is that it was working correctly locally but when I put it in CodeSandbox I get that error.

That’s because there is some weird issue with the fcc test suite and codesandbox.

My advice would be to test everything locally and make sure everything passes.
In order to get rid of the error message, you will have to remove the test suite codesandbox.

You can also try add this npm react-fcctest package and see if that works for you in codesandbox.

1 Like

Oh, thanks! I didn’t realize the problem was the test suite. I tried using react-fcctest and it works!

1 Like