Parent component seems to be passing props correctly, child component seems to not receiving it. No error codes

Tell us what’s happening:
I created the ‘App’ component that is passing props to the 'PlayBeats’ class component.

I did console.log(this.props) in ‘PlayBeats’ to test if props are passed correctly. console.log(this.props) does not printout anything.

I tested if ‘PlayBeats’ would render to the screen. It would not.
There are no error codes this time.

I would very much appreciate your advice. Many thanks.
P.S. Really doing my best to minimize the number of my questions.

Your code so far

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.log should be returning "Q", "W", "E", etc. It does not return anything.
    return (
    <h1>testing screen render</h1>
    )
    // 'testing screen render' should appear on the screen. It does not.
   }
}

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"));

Your browser information:

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

Challenge: Build a Drum Machine

Link to the challenge:

You’re not rendering them anywhere. The PlayBeat components are mapped to an array called forPlayBeats, which you don’t do anything with, hence there is no error to show

I am not sure I am following you. At the risk of asking a very basic question:
forPlayBeats is mapping component’s state property called ‘beat’.
It is then returning property called ‘keyTrigger’ within PlayBeats component.
Have I not passed keyTrigger to the PlayBeats component?
Should I not see it within PlayBeats when I do the console.log(this.props)?

    forPlayBeats=this.state.beat.map((obj,i,objArr)=>{ 
     return (
      <PlayBeats
      keyTrigger={objArr[i].keyTrigger}
      />
         );
    })

You never use that, you’ve got a variable called forPlayBeats, you don’t use it anywhere. Like this:

function example () {
  const someNumbers = [1,2,3].map(n => n * 10);
  return "here are some numbers";
}

example() does not return [10, 20, 30]

Nowhere here are you returning the result of creating an array of those PlayBeats functions

1 Like