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; ```