I’m trying to get into React, so thought I’d set myself a project of creating a web audio stem player. Everything seemed to be working until I tried to integrate drag and drop functionality. I got the drag and drop working, however the interactive elements of each of my tracks stopped working.

If the Track is rendered directly in the App, the sliders and knobs work fine, but if they’re within another component (in the example the TrackWrapper) they stop working. They can’t be moved, though the values they’re setting seem to be correct i.e. if you console log the values in setStemVolume and setStemPan, they’re the correct values dependent on where on the slider is clicked.

I’ve a feeling it’s to do with the way I’m setting/getting state of the elements but I can’t seem to figure it out. I’m not sure if on the re-renders the elements are getting reset to some default value.

There’s a CodeSandbox stripped down version of what I’ve been working on linked here, that features just a slider and knob that don’t really do anything.

return (
    <div>
      {stems.map((track) => (
        // This doesn't work

        <TrackWrapper key={track.file} track={track} 
        onSliderInput={(e) => setStemVolume(e, track.gainNode, track.uuid)}
        onPanSliderInput={(newValue) =>
          setStemPan(newValue, track.panNode, track.uuid)
        }/>

      //   This works
      //   <Track
      //   key={track.file}
      //   backgroundColour={track.colour}
      //   muteState={track.muted}
      //   soloState={track.soloed}
      //   volume={track.volume}
      //   pan={track.pan}
      //   onSliderInput={(e) => setStemVolume(e, track.gainNode, track.uuid)}
      //   onPanSliderInput={(newValue) =>
      //     setStemPan(newValue, track.panNode, track.uuid)
      //   }
      // />

      ))}
    </div>
  );

Thanks in advance for any help you can provide!