What is an invariant violation and why doesn't this work? (React)

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.

          return <button class="selectButton" onClick={this.changeKit(kit)}>

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]): 
            return (<div 

…but I’d rather do it so I can easily add new kits later without having to add a bunch of new code.


Well, I found a better way to do it, loading all the kits and making the buttons change which one is visible. One really hard thing was figuring out that the map function which created the kit change buttons needed a thisarg in order to do what I wanted it to do.

{this.state.kits.map((function(kit, i) {
          return <button 
        }), this)}

I suppose that’s because this.changeKit is inside the return statement of the map function. If it were in the return statement of a render method of a React component, I wouldn’t need a thisarg. I kind of get that now, but it took a long time to figure out.

Saw this and felt I might as well share this little secret: use arrow functions