React Drum machine assigning values

JavaScript
#1

Hi! so I am struggling a little bit with this project. I have my drum pads but making the bank and assigning them each values is where i’m getting tripped up. The DrumPadBank when put in my main app will cause the page to fail to render, BUT the DrumPads themselves will render making me think its something wrong with my DrumPadBank component. I followed the example page alot since i’m kinda struggling with react but made sure to code every line and think about what was going on.

Here is my code pen so you have more context.
I also left comments to try to explain whats happening.
https://codepen.io/bmansk14/pen/yrGNMd

#2

So you have 2 Main issues, generally speaking,

  1. Try understanding the Map function better, in DrumPadBank here is how you are using map
    bank1.map(( i, padBankArr) => {
          return(
            <DrumPad 
             clidId={padBank[i].id}
              clip={padBankArr[i].url}
              keyTrigger={padBankArr[i].keyTrigger}
              keyCode={padBank[i].keyCode}
              updateDisplay={this.props.updateDisplay}
             />
        )

The problem here is that the order of the arguments sent to the call back function to map an array are specific and cannot be changed


The first argument is the current value, the second is the index of the current value in the array being mapped and the third is the full array itself, what you are using above is the index of the array for each drum pad instead of the current value.
To give more clarity on mapping arrays, consider the below if you console.log the results within a map call back

const arr = ["A", "B", "C"]

arr.map((currentValue, idx, array)=>{
  console.log(currentValue, idx, array)
  return 0
})
/* Results
A 0 [ 'A', 'B', 'C' ]
B 1 [ 'A', 'B', 'C' ]
C 2 [ 'A', 'B', 'C' ]
*/
  1. the render in the above component returns this:
    return(
    <div className="pad-bank">
        {padBank}
    </div>
    )

but padBank is not assigned any value, most probably you are trying to render the mapped pads, if that is the case then you either have to take the mapped results into the return statement or assign themapped results to padBank

1 Like
#3

Thanks for your help. so I tried this.

render(){

    let padBank;
    
    padBank  = bank1.map(( currentValue, i, padBankArr) => {
          return(
            <DrumPad 
             clidId={padBankArr[i].id}
              clip={padBankArr[i].url}
              keyTrigger={padBankArr[i].keyTrigger}
              keyCode={padBankArr[i].keyCode}
              updateDisplay={this.props.updateDisplay}
             />
        )
    });
    return(
    <div className="pad-bank">
        {padBank}
    </div>
    )
  }

and it works!!! thanks for your help. I also noticed some misspelling that also caused some of the issues.
some places where

childId={padBank[i].id}

instead of

childId={padBankArr[i].id}
#4

That’s better, just FYI padBankArr[i] is also equivalent to currentValue ,

#5