quisiera saber si me podrían ayudar en algo, estoy trabajando en la api de Star Wars y debo hacer el llamado de los personajes y planetas, aparte de eso los detalles de cada uno hasta ahí todo esta bien lo que sucede es que dentro de cada personaje tiene los vehículos, las películas y las naves, como puedo estructurar para que no me aparezca el link si no la información que esta en el link.
Esta es la manera con la que llamo a la api:
import axios from "axios";
const todosPersonajes = async (state) => {
const peticion = await axios.get(`https://swapi.dev/api/people`)
state(peticion.data.results)
}
Este es el codigo donde llamo los detalles del personaje:
import React, { useEffect, useState } from 'react';
import { FooterApp } from '../FooterApp/FooterApp';
import { NavbarApp } from '../NavbarApp/NavbarApp';
import { unicoPersonaje } from '../Hooks/FuncionesPerson';
import { useParams } from 'react-router-dom';
import { FaReply } from 'react-icons/fa';
import Card from 'react-bootstrap/Card';
import Personajes from '../Img/Personaje.jpg'
import '../Hooks/Detalles.css';
export const DetallePersonaje = () => {
const [ data, setData ] = useState([]);
const idByParams = useParams();
const personaje = unicoPersonaje(idByParams.name);
useEffect(() => { personaje.then(res => setData(res)) }, []);
return (
<div>
<NavbarApp />
<button className='boton_atras'>
<a href='../Personajes'> <FaReply size={30} /></a>
</button>
<div className='Detalles_person'>
<div className='CardDetalle'>
<Card style={{ width: '22rem' }}>
<Card.Img src={Personajes} className='front' />
</Card>
</div>
<div className='detalles'>
<h6>Nombre: <span>{data.name}</span></h6>
<h6>Altura: <span>{data.height}</span></h6>
<h6>Masa: <span>{data.mass}</span></h6>
<h6>Color de Pelo: <span>{data.hair_color}</span></h6>
<h6>Color de Piel: <span>{data.skin_color}</span></h6>
<h6>Color de Ojos: <span>{data.eye_color}</span></h6>
<h6>Cumpleaños: <span>{data.birth_year}</span></h6>
<h6>Genero: <span>{data.gender}</span></h6>
</div>
</div>
<div className='tajetasdetalle'>
<div>
<Card style={{ width: '18rem' }}>
<Card.Text className='Card_Text'>N/A</Card.Text>
</Card>
</div>
<div>
<Card style={{ width: '18rem' }}>
<Card.Text className='Card_Text'>N/A</Card.Text>
</Card>
</div>
<div>
<Card style={{ width: '18rem' }}>
<Card.Text className='Card_Text'>N/A</Card.Text>
</Card>
</div>
<div>
<Card style={{ width: '18rem' }}>
<Card.Text className='Card_Text'>N/A</Card.Text>
</Card>
</div>
</div>
<FooterApp />
</div>
)
}
Lo que dice N/A es donde quiero que vaya la informacion de las URL de las naves, vehiculos y peliculas.
Agradezco 🙏 de corazón la ayuda.
todosPersonajes
? que haceunicoPersonaje
?https://swapi.dev/api/people/${id}/
) const data = peticion.json() return data }