Estoy tratando de obtener datos solo de un elemento específico seleccionado, pero desafortunadamente no sé cómo abordar esto.
Esto es lo que probé:
Mi ruta se ve así:
<Router> <Switch> <Route exact path="/explore"> <ExploreCard closetItems={closetItems} /> </Route> <Route path="/explore/:id"> <ExploreDetail closetItems={closetItems} setClosetItems={setClosetItems} /> </Route> </Switch> </Router>Y la obtención de la API:
const [closetItems, setClosetItems] = useState([]); useEffect(() => { const getClosets = async () => { try { const response = await axios.get( "https://api.npoint.io/eb35d003cd0c1991c6aa" ); const closet = response.data; setClosetItems(closet); } catch (error) { console.log(error); } }; getClosets(); }, []);Luego estoy mapeando los elementos de esta manera:
{closetItems.map((list) => ( <div key={list.id}> <h4> Name: <Link to={`/explore/${list.id}`}>{list.name}</Link> </h4> </div> ))}Aquí lo que sucede usando el código de arriba:
/explore/2 )/explore/2 muestra datos detallados de todos los elementos, no solo de id=2Aquí cómo se ve:
const ExploreDetails = ({ closetItems, setClosetItems }) => { const { id } = useParams(); return ( {closetItems // .filter((list) => list.id === id) .map((list) => ( <div key={list.id}> <h2>Name: {list.name}</h2> <h4>Category: {list.email}</h4> </div> ))} ¿Cómo puedo obtener datos solo del elemento seleccionado con id = 2 ?
Agregando de la respuesta de Javad Masoudian, si desea devolver solo el elemento que coincide con alguna condición, también puede usar Array#find y luego usarlo así:
//... const params = useParams(); const item = closetItems.find(({ id }) => id === parseInt(params.id)); //... return ( <> <h2>Name: {item.name}</h2> <h4>Category: {item.email}</h4> </> );De esta manera, no obtiene una matriz, sino el objeto en sí que puede usar directamente.
Todos los parámetros de la URL son de tipo cadena.
Puede usar el método parseInt() para convertir a tipo entero.
const ExploreDetails = ({ closetItems, setClosetItems }) => { const { id } = useParams(); return ( {closetItems .filter((list) => list.id === parseInt(id)) .map((list) => ( <div key={list.id}> <h2>Name: {list.name}</h2> <h4>Category: {list.email}</h4> </div> ))}