Can't use multiple instances of voice recorder

[madelahsan]

If you attempt to utilize multiple instances of the voice recorder, it stop functioning properly. https://codesandbox.io/s/react-voice-recorder-player-example-forked-7466se

[faizaniqbalLC]

It is working fine. I have checked on your provided codesanbox link. Could you please explain more about the error that you are facing.

[AbreezaSaleem]

The issue actually exists. It is due to the same naming being used in multiple components. Name collision if you'd like the proper term for this. Thanks for pointing this out OP, I will be pushing its fix soon.

[madelahsan]

The issue actually exists. It is due to the same naming being used in multiple components. Name collision if you'd like the proper term for this. Thanks for pointing this out OP, I will be pushing its fix soon.

Thank you Abreeza. I will be looking forward to the fix. Meanwhile I will also try to fix it on my end and If I successfully fixed it I will make a PR.

[AbreezaSaleem]

Here are my findings after further investigation into the issue:

Issue

• The code utilizes document.querySelector('....') in multiple places to retrieve HTML elements that are not directly accessible within the current component file. (note: if they were then the useRef hook could have been used)
• The issue arises when multiple instances of VoiceRecorder are used: the querySelector function fetches the first Element within the HTML DOM that matches the specified selector. In this case, it will always be the elements within the first VoiceRecorder component.
• Due to this, various issues can occur because the correct elements are not getting fetched.

It is worth mentioning that this is a classic example of the Name Collision problem.

Proposed Solution

Create a unique identifier for the root element and fetch the children element through that.

Example code:

    const rootElement = document.querySelector(<unique-identifier>);

    // fetch the children element through this parent element
    const child1 = rootElement.querySelector('class-name-1');
    const child2 = rootElement.querySelector('class-name-2');

This approach will ensure that the search for the elements is confined within the particular instance of the VoiceRecorder component, eliminating the root problem.

To implement this solution we'll need to generate unique ids. We can do this directly within the component using the useId hook. Its value will be used as a prefix for the already existing classname of the root component. Then we can store this uniqueID within React Context so it's available everywhere and we can use it to fetch the Root Component and use that to fetch the children components.

I'm putting this solution out here so everyone can have an open discussion on this. After that, I'll deploy the fix.

[AbreezaSaleem]

Fix deployed: v1.1.0

[madelahsan]

Thank you @AbreezaSaleem for taking your time to fix this.