Buen día, estoy usando la librería de react router dom para lo que es una aplicación de las características de cada uno de los países del mundo, bueno el problema surge que cuando mando las propiedades que capturo del método fetchCountry y los mando a mi componente card, lo que me gustaría hacer si es posible o si hay una solución mas factible es que cuando le doy click al componente link este me mande al componente Descripcion.js y hay lo que quiero es mostrar todas las características de cada pais que vaya seleccionando
import { useState,useEffect } from "react";
import Card from "./Card";
const Section1 = () => {
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [items, setItems] = useState([]);
const fetchCountry = async () => {
fetch('https://restcountries.com/v2/lang/es')
.then(res => res.json())
.then((data) => {
setIsLoaded(true);
setItems(data);
},
(err) => {
setIsLoaded(true);
setError(err);
}
);
}
useEffect(() => {
fetchCountry();
}, [])
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<section>
<div className="flex flex-wrap p-1 m-10">
{
items.map((item) => (
<div className="mr-8 mb-10" key={item.name} >
<Card {...item}/>
</div>
))
}
</div>
</section>
)
}
}
export default Section1
Aquí se puede ver el componente section que lo que hace es llamar a la api de apicountry y los datos los mando a mi componente Card.js
import { Link } from "react-router-dom"
const Card = ({ name, flag, population, region, capital, ...props }) => {
return (
<div className="w-280 h-full shadow-md rounded-md">
<Link to={`/description/${name}`} params={ props }>
<img className="rounded-t-md w-full h-180" src={flag} alt="" />
</Link>
<div className="p-2 mt-4 mb-10 mx-3">
<h1 className="font-bold text-xl mb-3">{name}</h1>
<h2 className="font-bold my-1">Population:<span className="font-normal ml-1">{population}</span></h2>
<h2 className="font-bold my-1">Region:<span className="font-normal ml-1">{region}</span></h2>
<h2 className="font-bold my-1">Capital:<span className="font-normal ml-1">{capital}</span></h2>
</div>
</div>
)
};
export default Card;
Aquí en mi componente Card recibo las props e itero algunos datos como el nombre del pais, la region y la capital ahora bien en lo que es el componente link al darle click me dirige al componente description, pero ahora estando dentro de este componente quisiera agregar algunas de las descripciones que me incluye la api como el lenguaje, distancia, clima etc. pero no logro hacer que las props que recibo de card las pueda mandar por medio del componente link a mi componente descripcion y hay dentro poder iterar las propiedades faltantes, cualquier ayuda que puedan brindarme seria de gran ayuda y la apreciaría mucho de antemano gracias