Feedback on Drum Machine

Feedback on Drum Machine


Tell me what you think code-wise (not much of a designer as you might tell!)


very nice job i really loved the design it’s so smooth and lovely, i’m not that far yet in the curriculum so i can’t judge the code but common it’s working :smile:.


You really don’t need to put the button letters, audio names, or audio urls in state. I was able to create a btns array with all the info need and eliminate a lot of repetitive code and text (the urls) with the following:

class App extends React.Component {
	state = {
		display: ''

	stealTextName = text => this.setState({display: text})

	render() {
		const btns = [
			['Q','Heater-1'], ['W', 'Heater-2'], ['E', 'Heater-3'],
			['A','Heater-4_1'], ['S', 'Heater-6'], ['D', 'Kick_n_Hat'],
			['Z', 'punchy_kick_1'],	['X', 'side_stick_1'], ['C', 'Brk_Snr']
		const convertName = name => name
		  .replace(/\w+/g, ([first,]) => first.toUpperCase() + rest.join(''));
		const {display} = this.state, {stealTextName} = this
		return (
			<div className='container'>
				<div id='drum-machine'>
					<div id='display'>
					<div id='controls'>
						{[letter,audioName]) => (


I like how simple and clean the app looks, few lines of code, great work