Style not activated

Tell us what’s happening:
I have written a code that shoul set state to “activeStyle” when key is pressed.
‘handleKeyPress(e)’ should activate ‘playSound()’ - it does.
‘playSound()’ should then play beat - it does.
‘playSound()’ should also call ‘activatePad()’ method that sets state.padStyle to the ‘activeStyle’.
This does not happen. When I press key I can hear beat, but the style of the key is not changed. I can not see why.
Can you please help.
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"
  }
];
const activeStyle = {
  backgroundColor: "#332211",
  color: "orange"
};
const inactiveStyle = {
  marginTop: "10px",
  color: "#332211"
};

class PlayBeats extends React.Component {
  constructor(props) {
    super(props);
    this.playSound = this.playSound.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);
    this.activatePad = this.activatePad.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);
    }
  }
  activatePad() {
    this.setState({
      padStyle: activeStyle
    });
  }
  playSound() {
    const sound = document.getElementById(this.props.keyTrigger);
    sound.play();
    this.props.display(this.props.clipId);
    this.activatePad();
    setTimeout(() => this.activatePad(), 100);
    
  }

  render() {
    console.log(activeStyle);
    return (
      <div id="drum-machine">
        <div
          className="drum-pad"
          id={this.props.clipId}
          onClick={this.playSound}
          style={this.props.padStyle}
        >
          <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),
      padStyle: inactiveStyle
    };
    this.display = this.display.bind(this);
  }

  display(name) {
    this.setState({
      display: name
    });
  }
  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.display}
          padStyle={this.state.padStyle}
        />
      );
    });

    return (
      <div id="drum-machine">
        <div id="inner-container">{forPlayBeats}</div>
        <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:

Style property here in React becomes an Object, so try adding it like style={{property: value}}

Anyway, I don’t think this will work. Try to make a class in your CSS and apply it when the pad button is activated.

For example, I have a class in my CSS .activate { background-color: #smth }, then I have a property in my Component’s state which checks if the pad button is acitvated { isActive: boolean }. Next step is to add this class to my button when the boolean of isActive changes. You can do this combining the conditions in your JSX output {boolean && class} in the className of your pad button. Hope this helps!)

1 Like