App does not render required item to the UI

Tell us what’s happening:
In th App component I have method ‘display’ that should set state for the property ‘display’.
‘display’ takes parameter ‘name’ from the PlayBeats component.
In the component PlayBeats, within the ‘playSound’ method, ‘display’ should take ‘this.props.clipId’ as a parameter and pass it to the App component, to the ‘display’ method.
App should then render this to the screen.
This is not happening. There are no errors. Other than that, ‘playSound’ works normally-it does play beat when I press the key.
I don’t know how to investigate this further.
Can you please help me.
Many thanks.

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: "Clap",
    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"
  }
];

class PlayBeats extends React.Component {
  constructor(props) {
    super(props);
    this.playSound = this.playSound.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);
  }

  componentDidMount() {
    document.addEventListener("keydown", this.handleKeyPress);
  }
  componentWillUnmount() {
    document.addEventListener("keydown", this.handleKeyPress);
  }

  handleKeyPress(e) {
    if (e.keyCode === this.props.keyCode) {
      this.playSound();
      this.props.display(this.props.clipId);
    }
  }

  playSound() {
    const sound = document.getElementById(this.props.keyTrigger);
    sound.play();
    this.props.display(this.props.clipId);
  }

  render() {
    //console.log(this.props.clipId)
    return (
      <div id="drum-machine">
        <div
          className="drum-pad"
          id={this.props.clipId}
          onClick={this.playSound}
        >
          <audio
            className="clip"
            id={this.props.keyTrigger}
            src={this.props.clip}
          />
          {this.props.keyTrigger}
        </div>
      </div>
    );

    return;
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      beat: beatsOne,
      display: String.fromCharCode(160)
    };
    this.display = this.display.bind(this);
  }

  display(name) {
    this.setState({
      display: namme
    });
  }
  render() {
    let forPlayBeats;
    forPlayBeats = this.state.beat.map((obj, i, objArr) => {
      return (
        <PlayBeats
          keyTrigger={objArr[i].keyTrigger}
          keyCode={objArr[i].keyCode}
          clipId={objArr[i].id}
          clip={objArr[i].url}
          display={this.state.display}
        />
      );
    });

    return (
      <div id="drum-machine">
        {forPlayBeats}

        <p id="display">{this.state.display}</p>
      </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.69 Safari/537.36

Challenge: Build a Drum Machine

Link to the challenge:

Hello!

You’re not calling the function display anywhere, hence the state.display property is not updating.

On the browser console, an error should be displayed for this line:

this.props.display(this.props.clipId);

If I read your code correctly, you should change this line:

          display={this.state.display}

With this:

          display={this.display}

There’s a typo here too:

display(name) {
    this.setState({
      display: namme // <- Typo
    });
  }
2 Likes