Estoy usando una API externa para obtener mis datos, que busco con axios .

Puedo recibir datos y mapearlos sin ningún problema, pero necesito poder hacer clic en un elemento específico de los datos e ir a otra página que muestre datos detallados de ese elemento de clic específico.

(puede imaginarlo como un blog que tiene publicaciones de blog y cuando hace clic en una publicación individual, obtiene datos solo relacionados con esa publicación)

Así es como busco mis artículos en el componente principal:

 const [items, setItems] = useState([]); useEffect(() => { const getItems = async () => { try { const response = await axios.get( 'APIendpoint' ); console.log(response); const final = response.data; setItems(final); } catch (error) { console.log(error); } }; getItems(); }, []);

Y simplemente mapeándolos, con Link a otra página:

 {items && items.map((item) => ( <div key={item.id}> <Link to={`/closet/${item.id}`}>{item.name}</Link> </div> ))}

Y mi enrutador, que funciona y la URL se actualiza:

 <Route exact path="/"><App /></Route> <Route exact path="/:id"><Component items={items}/></Route>

Ahora en Component.js x traté de hacer algo como esto:

 const Main = ({ items }) => { useEffect(() => { const getDetail = async () => { try { const response = await axios.get( `APIendpoint/${closetItems.id}` // path to the id ); console.log(response); const detail = response.data; setClosetItems(detail); } catch (error) { console.log(error); } }; getDetail(); }, []);

Pero no sucede nada cuando console.log(closetItems) - No estoy familiarizado con él, ¿estoy en el camino correcto o tengo que cambiar la estrategia?