Estoy creando un generador de facturas donde el usuario puede agregar un artículo, su precio y la cantidad. Quiero acceder a las entradas del usuario como un estado desde un componente funcional secundario ( TableItems.js ) a un componente funcional principal ( TableSheet.js ) para poder guardar las entradas del usuario en una base de datos, preferiblemente en Firestore. Tengo problemas para acceder al valor de entrada del usuario desde el componente secundario al componente principal. He estado luchando con este error durante días, realmente espero que puedan ayudarme.

Este es el componente hijo

 import React, {useState, useEffect} from 'react' function TableItems({index, tableItem }) { const [price, setPrice] = useState(0); const [qty, setQty] = useState(0); const [total, setTotal] = useState([]); useEffect(() => { //arithmetically add price and qty values const x = Number(price) * Number(qty) setTotal(x) return () => { //clean up function will be here }; }, [price, qty, total ]); return ( <> <tr> <td><input type='text' required/></td> <td><input type='number' value={price} onChange={(e) => setPrice(e.target.value)}/></td> <td><input type='number' value={qty} onChange={(e) => setQty(e.target.value)}/></td> <td>{total}</td> </tr> </> ) } export default TableItems

Este es el componente principal

 import React, { useState } from 'react' import TableItems from './TableItems' function TableSheet() { const [tableItem, setTableItem] = useState([1]); //adding a new table cell (table row) const addCell = () => { setTableItem((t) => [...t, t + 1]) } return ( <div> <table> <thead> <th>Item Description</th> <th>Price</th> <th>Qty.</th> <th>Total</th> </thead> { tableItem.map((tableItem, index, setItem) => { return <TableItems key={index} tableItem={tableItem} setItem={setItem} addCell={addCell}/> }) } </table> <button onClick={addCell}>+</button> </div> ) } export default TableSheet