{this.props.id} does not render to the screen

Tell us what’s happening:
I am trying to check what exactly is my code rendering to the screen. ‘this’ keyword suggests that my props are coming from the component’s state.
‘this.id’ suggests that props are passed from an array of objects called ‘beats’.

Render method does not render {this.props.id} to the screen.
console.log({this.props.id}) does not print out anything.

Given the code bellow, where are my props are coming from? Component’s state or from ‘beats’ array?

How can I “print out” what is being passed to the render method?

Many thanks.
P.S. I commented out all other methids in order to simplify this inquiry.

Your code so far

const beats = [
  {
    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"
  }
];

//keys

const buttons = beats.map((item) => {
  return item.keyTrigger;
});

//React component

class Drum extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      padStyle: "test"
    };

    //bind methods here
    // this.handelKeyPress=this.handleKeyPress.bind(this);
  }
  //declare methods here

  /*componentDidMount() {
    doucment.addEventListener("keydown", this.handleKeyPress);
  }

handleKeyPress(event) {
  if(event.keyCode===this.props.keyCode){
    this.playNote();
  }
}
  playNote() {
    sound.play();
  } */

  render() {
  
    return (
      <div className="drum-pad" id={this.props.id}>
        <audio id={this.props.keyTrigger} />
        {this.props.id}
      </div>
    );
  }
}

ReactDOM.render(<Drum />, 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/92.0.4515.159 Safari/537.36

Challenge: Build a Drum Machine

Link to the challenge:

‘this’ keyword suggests that my props are coming from the component’s state.

No, it means that it is part of the class or a property of the class. React uses JS class and injects a property called “props”. There is another property called “state” that React uses to keep track of state data for that class.

‘this.id’ suggests that props are passed from an array of objects called ‘beats’.

I don’t follow that. this.id to me suggests that there is a class property called id.

There would not normally be any “props” on this class because it is your root component. How would “props” get passed into it? There is no component to pass them in and there is no HOC (like the one returned by Redux’s connect) to inject them. (I suppose you could add a prop in the ReactDOM.render, but that seems odd.)

Given the code bellow, where are my props are coming from? Component’s state or from ‘beats’ array?

Neither. Props do not come from state. They are injected into the component, usually in one of the two methods mentioned above. (I suppose you could also do it by extending to a custom class.)

Do you want to use the beats array? You can set a component state variable to it. Or you can just use it since it is in scope to this class (like you did with padStyle).

P.S. I commented out all other methids in order to simplify this inquiry.

A good practice. When something doesn’t make sense, simplify until it does.

You could see your variable like this:

  render() {
    console.log(this)
    return (
      <div className="drum-pad" id={this.props.id}>
        <audio id={this.props.keyTrigger} />
        {beats.map(b => <h3>{b.id}</h3>)}
      </div>
    );
  }

That will both render through the ids onto the screen and it will log this to the console so you can see what is in there.


React is confusing. I remember struggling with these things. Keep it up, you’ll get it. Once it sinks in, it is very powerful and elegant.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.