Tengo este componente aquí
Escáner.js
import React, { Component } from "react"; import { render } from "react-dom"; import BarcodeScannerComponent from "react-qr-barcode-scanner"; function Scanner() { const [data, setData] = React.useState("Not Found"); return ( <> <BarcodeScannerComponent width={500} height={500} onUpdate={(err, result) => { if (result) setData(result.text); else setData("Not Found"); }} /> <p>{data}</p> </> ); } export default Scanner;Quiero usar este componente dentro de otro componente, lo mejor sería hacer clic en el botón. Pero esto no es posible porque estoy rompiendo las reglas de Hooks en React. Y para su uso, tengo que usar "datos" del componente Escáner y luego enviarlos al Componente de pedido.
¡Bien bien! así que ahora entiendo cuál es el problema, primero creo que tienes estos 2 archivos en un componente , si es así, sería así.
primero, importe su Scanner.js en el componente Order.js. como esto.
import Scanner from "./Scanner";y luego renderícelo donde quiera en el componente de orden, sería así.
<div className='form-group'> <label htmlFor='palette'>Palette</label> <input type='text' className='form-control' id='palette' name='palette' placeholder={currentOrder.palette} value={currentOrder.palette} onChange={handleInputChange} /> <Scanner/> </div>eso es todo
Veo que tienes algún problema con tu código:
<BarcodeScannerComponent width={500} height={500} onUpdate={(err, result) => { if (result) setData(result.text); else setData("Not Found"); // you don't need else in this position. it would be as follow. setData("Not Found"); }} />buena suerte:)