Error while building a drum machine using React

Question

I'm building a fcc-drum machine using React I get the following error when trying to map a data object:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

Below is the data that I am trying to map along with my code:

const soundData = [{ 
 letter:"Q",
 src:"https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/clap.wav",
 id: "clap"
},{

    letter:"W",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/hihat.wav",
    id:"hihat"
 },
 {
    letter:"E",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/kick.wav",
    id:"kick"
  },{
    letter:"A",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/openhat.wav",
    id:"openhat"
   },{

    letter:"S",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/boom.wav",
    id:"boom"
 },{

    letter:"D",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/ride.wav",
    id:"ride"
 },{

    letter:"Z",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/snare.wav",
    id:"snare"
 },{

    letter:"X",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/tom.wav",
    id:"tom"
 },{

    letter:"C",
    src: "https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/tink.wav",
    id:"tink"
 }]

   export default soundData
import React from "react";
import "./App.css";
import soundData from "./soundData.js";
import DrumPad from "./drumPad.js";

class App extends React.Component {
  render() {
    console.log(soundData);
    console.log(DrumPad);

    return (
      <div id="drum-machine">
        <div id="display" />
        {soundData.map(Data => (
          <DrumPad />
        ))}
      </div>
    );
  }
}

export default App;

import React from "react";

function DrumPad(props) {
  return <div className="drum-pad" />;
}

export default DrumPad

What am I doing wrong?

There are no errors, except keys (Warning: Each child in a list should have a unique "key" prop.) — Daniil Loban, Oct 05 '20 at 02:41

Tejogol · Accepted Answer · 2020-10-06T03:22:28.507

I would recommend taking a look at this question to find out more details about your error, but nevertheless, I've shared a working example below using functional components and fixing the missing key error mentioned by @DaniilLoban. The working example will print out the value of the letter and id keys from each object in your soundData array.

App.js

import React from "react";
import "./styles.css";
import DrumPad from "./DrumPad";
import soundData from "./soundData";

export default function App(props) {
  return (
    <div id="drum-machine">
      <div id="display" />
      {soundData.map((data) => (
        <DrumPad data={data} key={data.letter} />
      ))}
    </div>
  );
}

DrumPad.js

import React from "react";
import "./styles.css";

export default function DrumPad(props) {
  const { data } = props;
  return (
    <div className="drum-pad">
      <p>{data.letter}</p>
    </div>
  );
}

Hello sir, this didint work for me unfortunately. I have added the soundData object for more insight to the problem. thank you. — Collins_obi, Oct 06 '20 at 02:56
@Collins_obi thanks for the extra info. I've updated my answer to parse the soundData array and display the `letter` from each object in the data array. — Tejogol, Oct 06 '20 at 03:07

Error while building a drum machine using React

1 Answers1