0

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.

8
  • donde usas todosPersonajes? que hace unicoPersonaje?
    – Pipe
    Commented el 23 sept. 2022 a las 21:41
  • UnicoPersonaje es una constante donde puedo hacer que en otra pagina diferente me muestre los datos de un solo ese personaje que es alli donde quiero que me muestre los datos de las naves, vehiculos y peliculas de un personaje sea cual sea este es el codigo de UnicoPersonaje: const unicoPersonaje = async (id) => { const peticion = await fetch(https://swapi.dev/api/people/${id}/) const data = peticion.json() return data }
    – David2154
    Commented el 23 sept. 2022 a las 22:29
  • Como son varias urls... Como las quieres mostrar? Una seguida de la otra como texto, separadas por coma , un link <a> para cada uno de las urls? O como?
    – Pipe
    Commented el 24 sept. 2022 a las 2:03
  • @Pipe osea que me pueda aparecer la información que contienen las URL ¿si me entiendes?
    – David2154
    Commented el 24 sept. 2022 a las 15:40
  • Si, se se puede... Lo que pregunto es como quieres mostrar esas url... Porque son varias... Se pueden solo mostrar la url como texto, mostrarun link para cada una, es decir hay muchas formas de mostrar una lista de urls... Como las quieres mostrar?
    – Pipe
    Commented el 24 sept. 2022 a las 19:18

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.