0

La situacion es la siguiente, tengo 2 componentes (checkout ; checkoutForm) el primero hace la logica para crear una orden de compra, y el segundo es el formulario que pide los datos al usuario para crear la orden. El problema es que una vez completado el formulario quiero que esos datos se envien al otro componente, y para ello utilizo el metodo para pasar datos a traves de las props. Pero cuando le paso los datos a esa props en el componente del formulario me sale un error el cual dice "onConfirm is not a function" cuando en realidad lo es.

adjunto el codigo de ambos componentes :

import React from 'react'
import { useState } from 'react'

//Components
import CheckOutForm from '../checkoutForm'

//context
import { CartContext } from '../../context/cartContext'
import { useContext } from 'react'

//firebase

import { collection, query,  getDocs, addDoc, where, documentId, writeBatch } from "firebase/firestore";
import { db } from '../../services/firebase/firebaseConfig'

const Checkout = () => {
   const [loading, setLoading] = useState(false)
   const [orderId, setOrderId] = useState('')

   const {cart, total, clearCart} = useContext(CartContext) 


   const createOrder = async ({name, phone, email}) => {
       setLoading(true)

       try{
           const objOrder = {
               comprador: {name, phone, email},
               items: cart,
               total: total,
               date: Timestamp.fromDate(new Date())
           }

           const batch = writeBatch(db)

           const outOfStock = []

           const ids = cart.map(lentes => lentes.id)

           const lentesRef = collection(db, 'VisualCheck-Products')

           const lentesAddedFromFirestore = await getDocs(query(lentesRef, where(documentId(),'in',ids)))

           const {docs} = lentesAddedFromFirestore

           docs.forEach(doc => {
               const dataDoc = doc.data()
               const stockDb = dataDoc.stockDb

               const lentesAddedToCart = cart.find(lentes => lentes.id === doc.id)
               const lentesCantidad = lentesAddedToCart?.cantidad

               if (stockDb >= lentesCantidad) {
                   batch.update(doc.ref,{stock:stockDb- lentesCantidad})
               } else {
                   outOfStock.push({id:doc.id, ...dataDoc})
               }
           })

           if (outOfStock.length !== 0) {
               await batch.commit()

               const orderRef = collection(db,'orders')

               const orderAdded = await addDoc(orderRef, objOrder)

               setOrderId(orderAdded.id)
               clearCart()
           } else{
               console.error ('Disculpa, nos hemos quedado sin stock de algunos productos.')
           }
       } catch (error){
           console.log(error)
       } finally {
           setLoading(false)
       }
   }

   if (loading) {
       return 
       <h1>Su orden esta siendo generada, espere un momento.</h1>
   }
   if (orderId) {
       return <h1>El id de su orden es: {orderId}</h1>
   }

   return (
       <div>
           <h2>Checkout</h2>
           <CheckOutForm onConfirm={createOrder}/>
       </div>
   )
}

export default Checkout 
----------------------------------------------------------

import React, { useState } from "react";
import "./styles.css";

//MUI
import { TextField } from "@mui/material";
import Button from "@mui/material/Button";

//Formik

//Yup (validation schema)
import * as yup from "yup";

// Components



const CheckOutForm = ({ onConfirm }) => {
 const [name, setName] = useState("");
 const [phone, setPhone] = useState("");
 const [email, setEmail] = useState("");

 const handleConfirm = (event) => {
   event.preventDefault();

   const userData = { name, phone, email };

   onConfirm(userData);
 };

 return (
   <div className="container-Form">
     <h3>Complete el siguiente formulario para reservar la orden de compra</h3>
     <form onSubmit={handleConfirm} className="form">
       <label className="Label">
         <TextField
           className="TextField"
           type="text"
           placeholder="Nombre y apellido"
           value={name}
           sx={{ marginTop: 2 }}
           onChange={({ target }) => setName(target.value)}
         />
       </label>
       <label className="Label">
         <TextField
           className="TextField"
           type="text"
           placeholder="Telefono"
           value={phone}
           sx={{ marginTop: 2 }}
           onChange={({ target }) => setPhone(target.value)}
         />
       </label>
       <label className="Label">
         <TextField
           className="TextField"
           type="text"
           placeholder="Email"
           value={email}
           sx={{ marginTop: 2 }}
           onChange={({ target }) => setEmail(target.value)}
         />
       </label>
       <div className="Label">
         <Button
           variant="contained"
           type="submit"
           className="TextField"
           sx={{ marginTop: 2 }}
         >
           Crear Orden
         </Button>
       </div>
     </form>
   </div>
 );
};

export default CheckOutForm; ``` 
2
  • Probe algo similar a tu código, un componente padre que pasa una función flecha como prop a un componente hijo y no tuve problemas, la verdad no entiendo el error, no tenes un repositorio de Github para tener tu proyecto completo y probarlo? o alguna manera de probarlo tal y como lo tienes tu? el 12 sep. a las 20:51
  • sii ahi te lo dejo: github.com/Timakits/PreEntrega2Salgado.git el 12 sep. a las 20:55

1 respuesta 1

0

En App.jsx tenes esta ruta:

<Route path="/Checkout" element={<CheackoutPage />}/>s

El componente que se renderiza al dirigirse a dicha ruta es:

const CheackoutPage = () => {
  return (
    <div>
        <CheckoutForm/>
    </div>
  )
}

Es normal que no reconozca la función, ya que estas renderizando directamente el hijo y no el padre que es el que pasa la funcion como prop, deberias renderizar el componente padre, el hijo se renderizara al renderizar el padre, como en un arbol:

const CheackoutPage = () => {
  return (
    <div>
        <Checkout/>
    </div>
  )
}

Al renderizar Checkout tambien se renderizara esto:

return (
    <div>
        <h2>Checkout</h2>
        <CheckOutForm onConfirm={createOrder}/>
    </div>
)

Entonces la funcion llegara correctamente a CheckoutForm

1
  • Muchas graciass de verdad, ya lo estoy por probar el 13 sep. a las 12:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.