Child component doesn't receive props passed - php

Question

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.

Answer 1

You are using props wrong way. props is one object, just update like this.
const ResponseModal = (props) => {
const {flag, data} = props;
}