Dynamic React navbar from an object

Question

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!

Answer 1

Try this method to deal with your API response

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