Dear Coder,
I hope you all do fine.
I cant figure out why my code fails test 5 and 6. Is it because the test-script cant handle “React.createRef”, or did i made another mistake? (sound plays fine 
)
import React, { Component } from 'react'
class Button extends Component {
constructor(props) {
super(props)
this.audio = React.createRef()
}
handleClick = () => {
this.props.handler(this.props.name)
const audio = new Audio(this.audio.current.src);
audio.play();
};
handleKeyPress = (e) => {
if (e.keyCode === this.props.keyCode) {
this.props.handler(this.props.name)
const audio = new Audio(this.audio.current.src);
audio.play();
}};
componentDidMount() {
document.addEventListener('keydown', this.handleKeyPress);
}
render() {
return (
<div>
<button className="drum-pad" id={this.props.name} style={buttonStyle} onClick={this.handleClick} onKeyPress={this.handleKeyPress}>
<h1>{this.props.name}</h1>
<audio ref={this.audio} src={this.props.src} className='clip' id={this.props.name} />
</button>
</div>
)
}
}
const buttonStyle = {
fontSize: '20px',
color: '#323334',
backgroundColor: 'darkgrey',
fontFamily: 'monospace',
fontVariant: 'bold',
width: '7em'
}
export default Button;
and:
import React, { Component } from 'react';
import Button from './button';
import Display from './display';
class Drumpad extends Component {
constructor(props) {
super(props);
this.state = {
Display: '',
newSound: '',
selectedButton: "",
Q:
{
src: 'http://www.vibrationdata.com/Kawai_fifth_A_E.mp3'
},
W:
{
src: 'http://dight310.byu.edu/media/audio/FreeLoops.com/5/5/Piano%20Key%20C6-2871-Free-Loops.com.mp3'
},
E:
{
src: 'http://dight310.byu.edu/media/audio/FreeLoops.com/5/5/Piano%20Key%20C3-2862-Free-Loops.com.mp3'
},
A:
{
src: 'http://www.ulfkonrad.de/sound/mp3/ton_c/klavier.mp3'
},
S:
{
src: 'http://dight310.byu.edu/media/audio/FreeLoops.com/5/5/Piano%20Key%20C-2859-Free-Loops.com.mp3'
},
D:
{
src: 'http://www.vibrationdata.com/piano_G.mp3'
},
Z:
{
src: 'http://www.vibrationdata.com/piano_F_sharp.mp3'
},
X:
{
src: 'http://www.vibrationdata.com/Kawai_Major_Sixth_A_F_sharp.mp3'
},
C:
{
src: 'http://www.vibrationdata.com/Kawai_octave_A_A.mp3'
}
}
this.testChange = this.testChange.bind(this);
this.selectionChanged = this.selectionChanged.bind(this);
this.submitNewSound = this.submitNewSound.bind(this);
}
handler = (val) => {
this.setState({
Display: val
})
}
testChange(e) {
this.setState({newSound: e.target.value});
}
selectionChanged(e) {
this.setState({selectedButton: e.target.value});
}
submitNewSound(e) {
this.setState({[this.state.selectedButton]: {src: this.state.newSound}});
this.setState({newSound: ""});
}
render() {
return (
<div style={hauptFrame}>
<h1>Soundmaschine</h1>
<div style={test}>
<div id='row1'>
<Button name="Q" keyCode={81} id="Piano1" src={this.state.Q.src} handler={this.handler}/>
<Button name="W" keyCode={87} id="Piano2" src={this.state.W.src} handler={this.handler}/>
<Button name="E" keyCode={69} id="Piano3" src={this.state.E.src} handler={this.handler}/>
</div>
<div id='row1'>
<Button name="A" keyCode={65} id="Piano4" src={this.state.A.src} handler={this.handler}/>
<Button name="S" keyCode={83} id="Piano5" src={this.state.S.src} handler={this.handler}/>
<Button name="D" keyCode={68} id="Piano6" src={this.state.D.src} handler={this.handler}/>
</div>
<div id='row1'>
<Button name="Z" keyCode={90} id="Piano7" src={this.state.Z.src} handler={this.handler}/>
<Button name="X" keyCode={88} id="Piano8" src={this.state.X.src} handler={this.handler}/>
<Button name="C" keyCode={67} id="Piano9" src={this.state.C.src} handler={this.handler}/>
</div>
<Display className="display" cfg={this.state.Display}/>
</div>
<br/>
<input type="text" name="testa" size="40" component="input" placeholder="paste in the url (has to refer to a .mp3)" onChange={this.testChange} value={this.state.newSound}/>
<select defaultValue={""} name="buttonName" size="1" onChange={this.selectionChanged}>
<option value="" disabled hidden></option>
<option value="Q">Q</option>
<option value="W">W</option>
<option value="E">E</option>
<option value="A">A</option>
<option value="S">S</option>
<option value="D">D</option>
<option value="Z">Z</option>
<option value="X">X</option>
<option value="C">C</option>
</select>
<button type="submit" name="Submit" onClick={this.submitNewSound}>Change Sound</button>
</div>
)
}
}
const hauptFrame = {
marginLeft: '30%',
position: 'relative',
}
const test = {
display: 'flex'
}
export default Drumpad;
leads to:
import React, { Component } from 'react';
import './App.css';
import Drumpad from './components/drumpad';
class App extends Component {
render() {
return (
<div id="drum-machine">
<Drumpad />
</div>
);
}
}
export default App;
Someone got a Idea why my wonderful solution doesn`t pass test 5 and 6?
Best regards