Double map in React+Typescript

Question

Maybe I'm missing something, but how should I properly double map in this case? Bcs I have error on secon map : Property 'map' does not exist on type '{ departure: { code: string; name: string; dateTime: string; }; destination: { code: string; name: string; dateTime: string; }; duration: string; }

const [result, setResult] = useState<ConversionData[]>([]);

  type ConversionData = {
  uuid: string;
  airlinesCode: string;
  price: {
  amount: number;
  currency: string;
  };
  bounds: {
  departure: {
    code: string;
    name: string;
    dateTime: string;
  };
  destination: {
    code: string;
    name: string;
    dateTime: string;
  };
  duration: string;
   };
 };
 useEffect(() => {
   const api = async () => {
     const data = await fetch("http://localhost:3001/flights").then((res) =>
      res.json()
    );
    setResult(data);
  console.log(result);
};
 api();
}, []);

return (
 <div className="App">
   <h1>
     {result?.map((value) => {
       console.log(value)
       return (
         <div>
           <div>{value.price.amount}</div>
           {value.bounds.map((newvalue:any)=>{
             <div>{newvalue.departure.name}</div>
           })}
         </div>
       );
     })}
   </h1>
 </div>
 );

what I need to map

I've searched the internet for something similar, but I've hit the starting point, and I need to get to bounds -> departure -> name

Answer 1

Bounds in your type ConversionData is object. But at you data screenshot bounds should be array.

bounds: Array<{
  departure: {
    code: string;
    name: string;
    dateTime: string;
  };
  destination: {
    code: string;
    name: string;
    dateTime: string;
  };
  duration: string;
   };
 }>;