es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Barra de navegación React dinámica a partir de un objeto

24 Jul, 2023 Programación

Estoy haciendo un proyecto personal de React.js. Quiero hacer dinámicamente la barra de navegación desde una API que estoy utilizando. Quiero mostrar enlaces a la lista de películas. El problema es que la API trae un objeto y no sé cómo hacer el código. Este es el código:

import { useState, useEffect } from "react";
import { BrowserRouter, Link } from "react-router-dom";

const Navbar = () => {
    const [result, setResult] = useState([]);

    const fetchData = async () => {
        const res = await fetch("https://www.swapi.tech/api/films/");
        const json = await res.json();
        setResult(json.result);
    }

    useEffect(() => {
        fetchData();
    }, []);

    return (
        <>
        <browserrouter>
        {result.map((value, key) => {
            <link>
        })}
        </browserrouter>

    );
}

export default Navbar;

Tal vez haya otra manera de hacerlo que no sea de forma dinámica.
Además, tengo otro componente con una lista rendereada de las películas. Idealmente, me gustaría poder hacer clic en cada elemento de esa lista y ir a una nueva página con su descripción. Los enlaces de la barra de navegación irían a las mismas páginas.
¡Gracias de antemano!

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Barra de navegación dinámica con una API en React.js

    Si deseas generar dinámicamente la barra de navegación en tu proyecto de React.js utilizando una API, puedes seguir el siguiente código:

    import { useState, useEffect } from "react";
import { BrowserRouter, Link } from "react-router-dom";

const Navbar = () => {
  const [result, setResult] = useState([]);

  const fetchData = async () => {
    const res = await fetch("https://www.swapi.tech/api/films/");
    const json = await res.json();
    setResult(json.result);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <>
      <browserrouter>
        {result.map((value, key) => (
          <link key="{key}" to="{`/films/${value.uid}`}">
            {value.properties.title}

        ))}
      </browserrouter>

  );
};

export default Navbar;

    Este código obtendrá las películas de la API y generará dinámicamente los enlaces de la barra de navegación utilizando el componente Link de la biblioteca react-router-dom. Cada enlace tendrá el título de la película como etiqueta y se le agregará un identificador único (uid) a la URL.

    Para implementar la funcionalidad de hacer clic en una película y acceder a una nueva página con su descripción, puedes crear un nuevo componente para la página de detalle de la película y utilizar el componente Route de react-router-dom para renderizarlo. Además, puedes pasar el identificador único de la película como parámetro en la URL y utilizarlo para obtener los detalles de la película desde la API.

    Aquí tienes un ejemplo:

    import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";

const FilmDetail = () => {
  const { id } = useParams();
  const [film, setFilm] = useState(null);

  const fetchFilm = async () => {
    const res = await fetch(`https://www.swapi.tech/api/films/${id}`);
    const json = await res.json();
    setFilm(json.result.properties);
  };

  useEffect(() => {
    fetchFilm();
  }, [id]);

  return (
    <>
      {film ? (
        <>
          <h1>{film.title}</h1>
          {film.opening_crawl}

      ) : (
        Cargando...
      )}

  );
};

export default FilmDetail;

    Luego, puedes agregar un nuevo componente Route a tu archivo App.js para renderizar el componente FilmDetail cuando la URL coincida con el patrón /films/:id:

    import { BrowserRouter, Switch, Route } from "react-router-dom";
import Navbar from "./Navbar";
import FilmList from "./FilmList";
import FilmDetail from "./FilmDetail";

const App = () => {
  return (
    <browserrouter>
      <navbar></navbar>
      <switch>
        <route exact="" path="/" component="{FilmList}"></route>
        <route path="/films/:id" component="{FilmDetail}"></route>
      </switch>
    </browserrouter>
  );
};

export default App;

    Con esta configuración, al hacer clic en un enlace de película en la barra de navegación o en la lista de películas, serás redirigido a la misma página de detalle de la película.

Comments are closed.