Hi, I finally could deploy but I have problems to play different sounds,
Here is published.
the console throws this error:
Uncaught TypeError: n.props.handleDisplay is not a function
class App extends Component {
componentDidMount() {
console.log(this.audio)
window.focus()
}
constructor(props) {
super(props);
this.state = {
currentSoundId: "click"
};
this.handleClick = this.handleClick.bind(this);
this.handleDisplay = this.handleDisplay.bind(this);
}
handleDisplay = (e) => {
const value = e.currentTarget.id;
this.setState({
currentSoundId: `This sound now: ${value}`
});
};
handleClick = () => {
console.log("must sound", this.props.drumKey);
this.audio.play();
this.audio.currentTime = 0;
// problem 1
this.props.handleDisplay(this.props.drumKey);
};
render() {
return (
<div id="drum-machine" className="app">
<Wrapper>
<Display currentSoundText={this.state.currentSoundId} />
<div className="display">
{dataDrum.map(button => (
<Button
handleClick={this.handleClick}
handleDisplay={this.handleDisplay}
currentSoundId={button.name}
drumKey={button.name}
src={button.src}
image={button.img}
alt={button.name}
// problem 2, i think
result={ref => (this.audio = ref)}
/>
))}
</div>
</Wrapper>
</div>
);
}
}
Please, if someone can help me … I’ve been stuck in this for a long time.
