para ponerlos en contexto, estoy tratando de hacer una pagina web ecomerce, con esta api: https://fakestoreapi.com/. Estoy intentando hacer que al apretar el boton 'comprar', este muestre en la consola mediante una comparacion de id, entre el apirest y el id de la carta que contiene el producto (logicamente proveniente de la api tambien).
Datos de aclaracion: El boton comprar esta en la linea 29 y estoy tratando de hacer la comparacion para que me salga en consola en la linea 17 (Este es el verdadero problema que no se solucionar)
import React, { useEffect, useState} from 'react'
import './ApiEcommerce.css'
export const ApiEcommerce = ( ) => {
const [ product, setProduct ]=useState(false)//true
const [ api, setApi ]=useState({})
useEffect(()=>{ fetch('https://fakestoreapi.com/products')
.then(res=>res.json())
.then(json=>{ console.log(json)
setApi(json)
setProduct(true)
})
}, [])
const botonComprar = () => { return product ? api.map(( renderizarModal ) =>{return console.log( renderizarModal.id)}) : 'Error critico: Error 404 not found.'}
return (<>
{product ? api.map((ropa)=>{return <div className='container'><ul key={ropa.id} className='carta'>
<div className='carta-interior'>
<li><img src={`${ropa.image}`} alt='ropa' className='api-img'/></li>
<div className='Descripcion-producto'>
<li>Categoria: {`${ropa.category}`}</li>
<li>Precio: {`${ropa.price}`}</li>
<li>Nombre: {`${ropa.title}`}</li>
<div className='contenedor-boton'>
<button className='boton-carta' onClick={botonComprar}>Comprar</button>
</div>
</div>
</div>
</ul>
</div>}) : 'Cargando'}
</>)
}
Aun me falta mucho por aprender, se agradeceria una respuesta sencilla, muchas gracias.
botonComprar
y luego aplicar alguna lógica (he aqui mi duda, cual es la lógica que deseas al hacer map nuevamente sobre el array que contiene tus productos?)