So i'm building a QRcode scanner app.

When I scan a barcode, I want another modal to appear but I want to data (decoded from barcode) to be passed to my child Component which is ResponseModal.

here is my code

QrScanner.js

import { useHistory } from "react-router-dom";
import BarcodeScannerComponent from "react-qr-barcode-scanner";
import React, { useEffect, useState} from "react";
import axios from 'axios';
import ResponseModal from './ResponseModal';


const QrScanner = () => {

    const [data, setData ] = useState('');
    const [flag, setFlag] = useState(false);

    const history = useHistory();
    useEffect(() => {
      if(data === '') {
          return;
      }
  
  if (Number.isInteger(parseInt(data))) { // barcode scanned

        axios.get('/some/endpoint/code/'   data)
        .then(res => {
            if (res.data != false) { 
                setFlag(true);
            } else{
                setData('Sorry, Wrong barcode!');
            }
        })

      }
  })
      return (
         
      <>
          <BarcodeScannerComponent
              width={500}
              height={500}
              onUpdate={(err, result) => {
                  if (result) {
                      setData(result.text);
                  }
              }}
          />
          <p className="modal-result-show">{data}</p>  <---- this updates fine when barcode is scanned
          <ResponseModal open={flag} data={data}/>    <---- this is empty, why?
      </>
      );
  }


  export default QrScanner

And here is my ResponseModal:

import 'react-responsive-modal/styles.css';
import Modal from 'react-responsive-modal';
import React, {useEffect, useState} from "react";

  const ResponseModal = (flag, data) => {
  
    const [open, setOpen] = useState(false);
    const onCloseModal = () => setOpen(false);
    
    console.log(data);  <----- empty
    useEffect(() => {
        if(flag.open === true) {
            setOpen(true);
            flag.open = false;
        }
    })

    return (
      <>
        <Modal open={open} onClose={onCloseModal}>
          <div className="qr-modal-header-stock">
            <h5>Enter fulfillment stock</h5>
            <form action="/some/another/endpoint/save" method="POST">  
                <input type="hidden" name="ean" value={data} />   <--- empty
                <input type="number" name="product_stock" class="form-control"/> <br />
                <input type="submit" class="btn btn-primary form-control"/>
            </form>
          </div>
        </Modal>
      </ >
    );
  }



  export default ResponseModal
  

My question is, why am I not receing the data in my ResponseModal? I thought whenever {data} updates, everything that uses it also re-renders or being passed. What am I missing? I need {data} to do some logic with it on my backend side.

CodePudding user response：

You are using props wrong way. props is one object, just update like this.

const ResponseModal = (props) => {
  const {flag, data} = props;
}