1

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)

La imagen que contiene el problema:

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.

2
  • 1
    Consulta, si en la iteracion que representa cada carta ya tiene todas las propiedades del objeto y puedes pasar ese objeto como parámetro de tu funcion 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?)
    – GmrYael
    Commented el 3 mar. 2023 a las 21:06
  • Hola buenas, tu idea es muy buena, sucede que aun soy muy nuevo en react, es posible que mis soluciones no esten bien enfocadas, tu sugerencia es buena, intentare aplicarla, un saludo.
    – sandiooo
    Commented el 4 mar. 2023 a las 16:12

1 respuesta 1

1

Si al pulsar el botón comprara quieres que te muestre los que coinciden con el id del elemento seleccionado, debes de pasarle el parámetro id a dicha función y luego debes usar un filter, el map devuelve siempre un array con el mismo numero de elementos del original.

El botón quedaría así <button className='boton-carta' onClick={()=>botonComprar(ropa.id)}>Comprar</button>

Y la función comprar así.

const botonComprar = (id) => {
    const filtrados = api.filter(elemento => elemento.id === id);
    console.log(filtrados)
    //Si queires solo los ids sería console.log(filtrados.map(elem => elem.id));
}
1
  • Me funciono, muchas gracias, en caso de querer el mismo id se sume con la misma mercaderia, podria hacerlo dentro de esta funcion botonComprar no?
    – sandiooo
    Commented el 4 mar. 2023 a las 17:42

Tu Respuesta

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

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