quagga | Cumulus Quagga Repository | TCP library

I am trying to import data from a JSON file (a list of animals) into a React component.

I am getting this error:

TypeError: Cannot read property 'map' of undefined.

I can't figure out why though, because it is defined in my Animal component.

Here is my json file:

I'm trying to write some vanilla javascript code to do barcode scanning from my website, however I can't even get past the first step using the Quagga javascript library. My code is currently this:

I'm trying to put a QR barcode scanner in my website using Quagga after lots of trying I finally succeeded to put the live reader, its ask for permission to use in the pc but when I'm trying to access it through my phone it doesn't work, and by doesn't work I mean doesn't even ask for permission to open the camera

I am rendering the script tag on the ejs file and it looks something like this:

I would like to install in a component via CDN called vue-cc-quaggajs to read barcodes.

I've tried the following:

On a module dialog, I want to change the value of input value (#quaggaIsbn). I tried document.getElementById("quaggaIsbn").value = result.codeResult.code but it wasn't reflected to the values the form sends to the server. How can I change the values Formik sends to the server?

NewProjectDialog.js

In React, I'm using the Quagga.js library to decode barcodes from the webcam.

Everything is working fine except in the "OnDetected" function that Quagga calls when a barcode is scanned. When coming from a callback, the React code loses access to the "this" of the React Component.

Below is the code and the issue comes into play in the onDetected(result) function when called as a callback from the Quagga.onDetected(this.onDetected);

If feel like this issue is more of a misunderstanding of React itself rather than the library having an issue. If this is the case, some general principles for working with Third Party Libraries would be greatly appreciated.