Certain QR codes are not read from react-qr-reader

Question

I've tried to implement QR Validation. So I generated QR codes for 40 people out of which 2 didn't get scanned. When I tried to scan via Other apps it read the data from the QR Code. I'm not able to figure out if the problem is with QR Code or the Scanner. When I generated the QR code from an online Website called QR-monkey, the scanner was able to read the data. So please help me figure out what and where exactly the problem is. I resized the QR resolution also to 2000px when I assumed its because of clarity issues.

Scanner:

const Scanner = (props) => {
  const [startScan, setStartScan] = useState(false);
  const [loadingScan, setLoadingScan] = useState(false);
  const [data, setData] = useState("");

  
  const handleScan = async(scanData) => {
    console.log(`loaded data data`, scanData);
    if (scanData && scanData !== "") {
      setLoadingScan(true);
      console.log(`loaded >>>`, scanData);
      const resData= JSON.parse(scanData)
      console.log(resData);
      setStartScan(false);
      setData(resData);
  setLoadingScan(false);
      
  };
}


  const View = (e) => {
    navigate('/View')
  }

  const handleError = (err) => {
    console.error(err);
    navigate('/Scan')
  };
  
  const handleVerify = async(e) =>{
    setisverifying(true)

    const response = await axios({
      method:'post',
      url: 'verifyurl',
      data: data
  }).then(res => {
    console.log(res);
    if (res.status == 201) {
     
      navigate('/Success', {
        state:{
          name:res.data.resName,
          taken:res.data.resTaken,
          preference:res.data.resPreference,
          team:res.data.resTeam,
        }
      })
    }
  }).catch(err => {
    console.log(err);
  })
  setisverifying(false)
  }
  
  return (
    <div className="login-box">
    <h2>
      Scanner
    </h2>
<>
    <button className='scanButton'
      onClick={() => {
        setStartScan(!startScan);
        setData('')
      }}
    >
      {startScan? "Stop Scan": "Start Scan"}
    </button>
    {startScan && (
      <>
        <QrReader
          delay={100}
          onError={handleError}
          onScan={handleScan}
          // chooseDeviceId={()=>selected}
          style={{ width: "100%", height: "100%" }}
        />
      </>
    )}
    {loadingScan ? 
    <CircularProgress />
    : ''}

    {data == ""? '':''
        }
    {data !== "" && <table className='tTable'>
        <tbody className='Ttbody' >
          <tr className='Ttr'><p>Name</p>
          <td className='Ttd' >{data.state.name}</td>
          </tr>
          
          <tr className='Ttr'><p>Team</p>
          <td className='Ttd'>{data.team}</td>
          </tr>
          
        </tbody>
      </table>}
    {isverifying?
    <CircularProgress /> : '' }
    {data !=="" && <button className='scanButton' type="" onClick={handleVerify} >Verify</button>}
    
    <button className='scanButton' onClick={View}>View</button>
  </div>
  );
};

export default Scanner;

Generator.js:

function QrCodeGenerator() {
    const [state, setState] = useState({
        name:'',
        phone:'',
        email:''
    });
    const [team, setTeam] = useState('');
  const teams = [
    {value:'Greeters', label:'Greeters'},
    {value:'Cleaning', label:'Cleaning'},
  ]
  

    const GenerateQRCode = (e) => {
    e.preventDefault()

    QRCode.toDataURL(value, {
            margin: 2,
            color: {
                dark: '#000000',
                light: '#ffffff'
            },
      width: 2000,
      height:2000
        }, (err, value) => {
            if (err) return console.error(err)    
            console.log(value)
            setQr(value)
      console.log(data)
        })
    }


    function handleChange(event) {
        const res = event.target.value;
        setState({
            ...state,
            [event.target.name]: res
        })
    }

    const handleSelect = (e) => {
      setTeam(e.value)
      console.log(data);
    }
    const data = {
      state, team
    }

    
    const value = JSON.stringify(data)
    const handleSubmit = async(e) =>{
      e.preventDefault()
      if (team=='') {
        alert("Team is Required")
      }
      else{
      setLoading(true)
      const response = await axios({
        method:'post',
        url: "submitURL",
        data: data
      })
      .then(res => {
        console.log(res);
        if(res.status==201){
          setSuccess(true)
          setLoading(false)
        }
        // Create the email payload with the QR code image as an attachment
        
      })
      .catch(err => {
        console.log(err);
        if (err.response.status==406) {
          setErr(true)
          seterrMsg("The volunteer already exists!")
        }
        else{
          alert('There is an internal Server error. Kindly report to the IT team')
        }
      })
      setState({
        name:'',
        phone:'',
        email:''
      })
      setTeam('')
      setLoading(false)

    }
  }

}
const handleSuccess = (e) =>{
  setSuccess(false)
}
      // download QR code
    
  return (
    <div className='login-box'>
        <form onSubmit={GenerateQRCode}>
          <input name='name' id='name' placeholder='Full Name' pattern="^(\w+)\s(\w+)$" value={state.name} onChange={handleChange} required />
            <input name='phone' id='phone' placeholder='Phone' type='tel' pattern="(6|7|8|9)\d{9}$" value={state.phone} onChange={handleChange} required='true'/>
            <input name='email' id='mail' placeholder='Email' type='email'  value={state.email} onChange={handleChange} required />
              <br/>
            <Select
              className='SelectTeam'
              closeMenuOnSelect={true}
              components={animatedComponents}
              isMulti={false}
              options={teams}
              name='team'
              onChange={handleSelect}
            />
                <button type='submit' >Generate</button>
        </form>  
        {qr && <>
                <img src={qr} alt='' className='qrimg' id='can'/>
        <a href={qr} download={`${state.name}.png`} ><button value="Download" >Download</button></a>
            </>}
      {loading ?  <CircularProgress /> :
      <button onClick={handleSubmit}>Submit</button>}
      <br/>       
    </div>

  )
}

export default QrCodeGenerator

Thank you for helping out. I've tried to reduce the code to the most significant parts, but still ended up retaining them assuming it might give some input to help me out. Final question is, what kind of scanners do apps that were actually able to read the QR codes use? and Why the one generated online was readable by my scanner and not the one I generated?

Answer 1

It seems that the react-qr-reader has bugs that were not resolved. So I just changed the module to modern-react-qr-reader which is a new and better package that will receive many updates. That fixed my problem.