Estoy practicando React con una tienda virtual. Tengo un un componente ProductData.js en la que está la const products, que es la array en la que tengo los datos de todos los productos. Esa info la pasé a Product.js, en la que construí la card de cada uno de los productos. Y cree un home llamado Products.js en el que con un map hice que se puedan ver todos los productos.
El problema está en que ahora quiero que al hacer click en "Ver detalles" se abra una página en la que se pueda ver toda la información del producto en el que se hizo click. Eso lo estoy trabajando en el componente Detail.js Yo pensé que podía pasar la data a Detail de la misma forma que lo había hecho a Product, pero no me funciona.
Les comparto el comienzo del código de Detail.js para que vean lo que intenté:
import React from 'react';
import accounting from 'accounting'; //para que el precio se muestre con formato de moneda
import { useStateValue } from '../../StateProvider'; //
import { actionTypes } from '../../reducer'; //
import './detail.css';
import { Link } from "react-router-dom";
//Material UI
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import IconButton from '@mui/material/IconButton';
import { AddShoppingCart } from '@material-ui/icons';
import Filter1Icon from '@mui/icons-material/Filter1';
import LanguageIcon from '@mui/icons-material/Language';
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
//Componente Rating
import Rating from '../Rating/Rating';
//Para probar si funciona hardcodeado
import anecdotas from '../../images/anecdotas.jpg'
import NicoBonder from '../../images/NicoBonder.jpg';
import products from '../../productData';
export default function Detail( props ) {
const API_URL = 'http://localhost:3500/arrayProducts';
const [arrayProducts, setArrayProducts] = useState([]);
const [fetchError, setFetchError] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const {id, name, author, regionTrip, image, price, rating, description, file, authorImg, authorDescription, pages, language, published} = props;
const [{basket}, dispatch] = useStateValue();
const addToBasket = () => {
dispatch({
type: actionTypes.ADD_TO_BASKET,
item: {
id,
name,
author,
regionTrip,
price,
rating,
image,
description,
file, authorImg, authorDescription, pages, language, published
}
})
}
useEffect(() => {
const fetchItems = async () => {
try {
const response = await fetch(API_URL);
if(!response.ok) throw Error('Hubo un error en los datos solicitados');
const listItems = await response.json();
setArrayProducts(listItems);
setFetchError(null);
} catch (err) {
setFetchError(err.stack);
} finally {
setIsLoading(false);
}
}
setTimeout(() => { //esto despues puedo borrarlo, es para simular el tiempo de carga
(async () => await fetchItems())();
}, 2000)
}, [])
return (
<div className='detailComponent'>
<div className='topSection'>
<div className='leftColumn'>
<Link to="/" className="btnBack">
<ArrowBackIosIcon /> Volver
</Link>
<div className='freeSample'>
<h3>Lee las primeras páginas</h3>
<img src={image} />
</div>
<div className='aboutAuthor'>
<h3>¿Quién es el autor?</h3>
<div className='authorPresentation'>
<img src={NicoBonder} />
<h4>Nico Bonder</h4>
</div>
<p>Nico escribe cuentos hace más de 15 años y cuando comenzó a viajar sintió la necesidad de narrar las historias que atravezaba en sus viajes. Así nacieron sus primeras crónicas de viajes, en las que muestra los hechos más interesantes del viaje que hizo junto a su pareja Lu por Sudamérica. Sus escritos son directos, rápidos y cargados de acciones.</p>
</div>
</div>
En donde dice
<img src={image}
/> y <img src={NicoBonder} />
deberían mostrarse unas imágenes que vienen de ProductData, pero no aparece nada.
En App.js la ruta para abrir la vista individual de los productos es: <Route path="/product/:id" element={} />
Espero que alguno me ayude porque intenté de varias formas y todavía no logré que la info de ProductData pase a Detail y no logro darme cuenta en dónde está el error. Muchas gracias.