Dynamic React navbar from an object-CodePudding

I am doing a personal React.js project. I want to dynamically do the navbar from an API that I am using. I want to display links to the list of films. The problem is that the API brings an object and I do not know how to do the code. This is the code:

import { useState } 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;

Maybe there is another way to do it than dynamically. Also, I have another component with a rendered list of the films. Ideally I would like to be able to click in each item of that list and go to a new page with the description of it. The links of the navbar would go to the same pages. Thanks in advance!

CodePudding user response：

Try this method to deal with your API response

 <BrowserRouter>
   {result.map((value) => (
      <Link to={value._id}>{value.description}</Link>
    ))}
  </BrowserRouter>