Child class component will not console.log nor render to the screen

[Deyan11]

Tell us what’s happening:
I created a ‘playBeats’ class component that is the child of the ‘App’ component.
‘playBeats’ will not console.log nor render anything to the screen. Error code is “Failed to load resource: the server responded with a status of 404 ()”
I don’t know what could be the reason.
Help is more than welcome.
Many thanks/

Link to my code:

Build a Drum Machine in progress

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36

Challenge: Build a Drum Machine

Link to the challenge:

freeCodeCamp.org

[lasjorg]

The two are not related. The 404 is coming from the double-quoted audio link you have in the first object in the beatsOne array.

"'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'"

The lack of logging is because:

1. You are not using what map returns (myKeysAll is not used).

2. Your component name is not capitalized, it should be PlayBeats

[Deyan11]

Thank you very much.

[Deyan11]

I am sorry to bother you again sir, but I have rewritten code several times and still did not manage to solve this problem.

Would you be so kind to take a look at my new code and perhaps give me an advice?
What troubles me is that ‘PlayBeats’ should be able to return props, because I passed it from the ‘App’ component. Instead, it gives me 404 error message.

I tried to fix this by looking for solutions on the net, however, solutions provided are beyond my coding knowledge at this point.

Many thanks in advance.

My code:

const beatsOne = [
  {
    keyCode: 81,
    keyTrigger: "Q",
    id: "Heater-1",
    url: "'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'"
  },
  {
    keyCode: 87,
    keyTrigger: "W",
    id: "Heater-2",
    url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"
  },
  {
    keyCode: 69,
    keyTrigger: "E",
    id: "Heater3",
    url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3"
  },
  {
    keyCode: 65,
    keyTrigger: "A",
    id: "Heater4",
    url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3"
  },
  {
    keyCode: 83,
    keyTrigger: "S",
    id: "",
    url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"
  },
  {
    keyCode: 68,
    keyTrigger: "D",
    id: "Open-HH",
    url: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"
  },
  {
    keyCode: 90,
    keyTrigger: "Z",
    id: "Kick-n'-Hat",
    url: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"
  },

  {
    keyCode: 88,
    keyTrigger: "X",
    id: "Kick",
    url: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"
  },
  {
    keyCode: 67,
    keyTrigger: "C",
    id: "Closed-HH",
    url: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"
  }
];

const beatsTwo = [
  {
    keyCode: 81,
    keyTrigger: "Q",
    id: "Chord-1",
    url: "https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3"
  },
  {
    keyCode: 87,
    keyTrigger: "W",
    id: "Chord-2",
    url: "https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3"
  },
  {
    keyCode: 69,
    keyTrigger: "E",
    id: "Chord-3",
    url: "https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3"
  },
  {
    keyCode: 65,
    keyTrigger: "A",
    id: "Shaker",
    url: "https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3"
  },
  {
    keyCode: 83,
    keyTrigger: "S",
    id: "Open-HH",
    url: "https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3"
  },
  {
    keyCode: 68,
    keyTrigger: "D",
    id: "Closed-HH",
    url: "https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3"
  },
  {
    keyCode: 90,
    keyTrigger: "Z",
    id: "Punchy-Kick",
    url: "https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3"
  },

  {
    keyCode: 88,
    keyTrigger: "X",
    id: "Side-Stick",
    url: "https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3"
  },
  {
    keyCode: 67,
    keyTrigger: "C",
    id: "Snare",
    url: "https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3"
  }
];

class PlayBeats extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
   console.log(this.props)
    //Console should be returning "Q", "W", "E", etc. Instead, it gives me error code 'Failed to load resource: the server responded with a status of 404 ()'
    
   }
}

class App extends React.Component {
  state = {
    beat: beatsOne
  };

  render() {
  
    let forPlayBeats;
    forPlayBeats=this.state.beat.map((obj,i,objArr)=>{
      
     return (
      <PlayBeats
      keyTrigger={objArr[i].keyTrigger}
      />
       );
    })
    
    
    let myKeysLett;
    myKeysLett = this.state.beat.map((arrObj) => {
      return (
        <button className="drum-pad" id={arrObj.id}>
          <audio className="clip" id={arrObj.keyTrigger} src={arrObj.url} />
          {[arrObj.keyTrigger]}
        </button>
      );
    });
    return (
      <div id="drum-machine">
        {myKeysLett}
        <div id="display"></div>
      </div>
    );
  } // render ends
}

ReactDOM.render(<App />, document.getElementById("App"));

[kevinSmith]

@Deyan11

What troubles me is that ‘PlayBeats’ should be able to return props, because I passed it from the ‘App’ component. Instead, it gives me 404 error message.

No, PlayBeats is not giving you a 404. That is an HTTP error code. It is because (in this case) you are trying to use an asset that the server does not have. When I look in the network tab of the browser dev tools, I see:

Do you see that extra quote mark? After “mp3”?

This is where you are trying to reference it:

    url: "'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'"

Do you see the extra quote marks at the beginning and end of the string?

That is what lasjorg was trying to say when he said:

The two are not related. The 404 is coming from the double-quoted audio link you have in the first object in the beatsOne array.

"'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'"

When I fix that, the 404 goes away.