I’m doing the Drum Machine project, and I’m trying to set it up so that the user can choose from multiple different banks of sounds. I want to have two (or more) elements that, when clicked, select a new list of sounds that are played when the user clicks any of the Drum Pad elements.
I’ve tried to implement this a number of different ways, and I always get the message:
[object error] {
framesToPop: 1,
name: "Invariant Violation"
}
I figured the way to do it was to have an array of “kit” objects, then map that array to create a list of buttons. On click, the “kit” object would be passed to a changeKit() function that would set it as the “kit” property in the state object.
{this.state.kits.map((kit)=>{
return <button class="selectButton" onClick={this.changeKit(kit)}>
{kit.kitName}
</button>
})}
Why doesn’t that work? Maybe because the reference to the “kit” object is already in use by the map function? And what is an “invariant violation” anyway?
In any case, can anybody suggest a different approach to this? As it is, I have it set up to toggle between two kits:
handleClick() {
this.props.kit== kit1 ? this.props.select(this.props.kitList[1]):
this.props.select(this.props.kitList[0]);
}
render(){
{this.props.kitList.map((kit)=>{
return (<div
class="selectButton"
onClick={this.handleClick}
>{kit.kitName}</div>)
})}
}
…but I’d rather do it so I can easily add new kits later without having to add a bunch of new code.
Thanks