title: I am confusing to arrange data. I am new in TS. I got the data from two APIs and I merged it but now I have confusion about how to render in screen
body: <p>App.tsx</p>
  <pre><code>export interface Hotel {
      id: string;
      name: string;
      address1: string;
      address2: string;
      starRating: number;
      images: string[];
      longDescription: string;
  }
  
  //HotelCard.tsx
  
  export interface Room {
      id: string;
      name: string;
      longDescription: string;
      occupancy: {
          maxAdults: number;
          maxChildren: number;
          maxOverall: number;
      };
  }
  
  const App: React.FC = () =&gt; {
      // const [loading, setLoading] = useState&lt;boolean&gt;(false);
      const [hotels, setHotels] = useState&lt;Hotel[]&gt;([]);
      const [rooms, setRooms] = useState&lt;Room[]&gt;([]);
  
      useEffect(() =&gt; {
          const getData = async () =&gt; {
              const { data: hotels } = await axios.get&lt;Hotel[]&gt;(url);
  
              const allRooms = await Promise.all(
                  hotels.map(async ({ id }) =&gt; {
                      const {
                          data: { rooms },
                      } = await axios.get&lt;{ rooms: Room[] }&gt;(
                          `url/${id}`
                      );
                      return rooms;
                  })
              );
  
              const allDetails = hotels.map((ele, index) =&gt; [ele, allRooms[index]]);
  
              console.log(allDetails);
          };
          getData();
      }, []);
      return (
          &lt;div&gt;
              &lt;GlobalStyle /&gt;
              ...
              &lt;HotelCard hotels={hotels} rooms={rooms} /&gt;-
          &lt;/div&gt;
      );
  };
  
  export default App;
  </code></pre>
  <p>console.log(allDetails)</p>
  <pre><code>0: Array(2)
  0: {id: 'OBMNG1', name: 'OBM Hotel 1', description: 'Etag for the win chocolate biscuit wafer soufflé t…fee caramels pudding gingerbread cookie lollipop.', address1: 'Shrewsbury', address2: 'Address 2', …}
  1: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
  length: 2
  [[Prototype]]: Array(0)
  1: (2) [{…}, Array(6)]
  2: (2) [{…}, Array(9)]
  3: (2) [{…}, Array(11)]
  </code></pre>
  <p>here, at index 0, the first response from hotel API and second from room API but both are connected that is why I merged and from the second array of array need to display only 3 rooms. rest of the same.</p>
  <p>HotelCard.tsx</p>
  <pre><code>interface HotelListProps {
    hotels: Hotel[];
    rooms: Room[];
  }
  
  const HotelCard: React.FC&lt;HotelListProps&gt; = ({ hotels, rooms }) =&gt; {
    return (
      &lt;div&gt;
        {hotels.map((hotel) =&gt; (
          &lt;div key={hotel.id}&gt;
            &lt;h1&gt;{hotel.id}&lt;/h1&gt;
            // more code
          &lt;/div&gt;
        ))}
        {rooms.map((room) =&gt; (
          &lt;div key={room.id}&gt;
            &lt;h1&gt;{room.name}&lt;/h1&gt;
            // more here...
          &lt;/div&gt;
        ))}
      &lt;/div&gt;
    );
  };
  
  export default HotelCard;
  </code></pre>
  <p>Actual JSON
  API1:</p>
  <pre><code>[
    {
      &quot;id&quot;: &quot;OBMNG1&quot;,
      &quot;name&quot;: &quot;OBM Hotel 1&quot;,
      &quot;description&quot;: &quot;Etag for the win chocolate biscuit wafer soufflé toffee toffee donut. Tart biscuit wafer pudding chocolate cake oat cake halvah\r\nMarshmallow halvah gingerbread apple pie muffin biscuit. Cake pudding topping pie lemon drops lollipop. Bear claw oat cake jelly beans. Bonbon toffee caramels pudding gingerbread cookie lollipop.&quot;,
      &quot;address1&quot;: &quot;Shrewsbury&quot;,
      &quot;address2&quot;: &quot;Address 2&quot;,
      &quot;postcode&quot;: &quot;WC1R 4PS&quot;,
      &quot;town&quot;: &quot;London&quot;,
      &quot;country&quot;: &quot;United Kingdom&quot;,
      &quot;countryCode&quot;: &quot;GB&quot;,
      &quot;starRating&quot;: &quot;4&quot;,
      ],
      &quot;telephone&quot;: &quot;12345666&quot;,
      &quot;email&quot;: &quot;JabbaScript@guestline.com&quot;,
      &quot;images&quot;: [
        {
          &quot;url&quot;: &quot;https://rl-uk2.azureedge.net/picturemanager/images/OBMNG1/Hotel1.JPG&quot;
        },
        {
          &quot;url&quot;: &quot;https://rl-uk2.azureedge.net/picturemanager/images/OBMNG1/hotel4.jpg&quot;
        },
        {
          &quot;url&quot;: &quot;https://rl-uk2.azureedge.net/picturemanager/images/OBMNG1/room5.jpg&quot;
        }
      ],
      &quot;checkInHours&quot;: &quot;14&quot;,
      &quot;checkInMinutes&quot;: &quot;00&quot;,
      &quot;checkOutHours&quot;: &quot;11&quot;,
      &quot;checkOutMinutes&quot;: &quot;00&quot;,
      &quot;position&quot;: {
        &quot;latitude&quot;: &quot;51.507351000&quot;,
        &quot;longitude&quot;: &quot;-0.127758000&quot;,
        &quot;timezone&quot;: &quot;GMT&quot;
      }
    },
  ]
  </code></pre>
  <p>API2:</p>
  <pre><code>&quot;rooms&quot;: [
      {
        &quot;id&quot;: &quot;DTFF&quot;,
        &quot;name&quot;: &quot;Deluxe Twin&quot;,
        &quot;shortDescription&quot;: &quot;Halvah pastry tart marshmallow croissant chupa chups jelly-o.&quot;,
        &quot;longDescription&quot;: &quot;Halvah pastry tart marshmallow croissant chupa chups jelly-o. Gummi bears toffee jelly beans jelly pie jujubes danish candy cheesecake. Gummies fruitcake bonbon topping gingerbread lemon drops. Candy canes dragée biscuit fruitcake. Candy canes tootsie roll lemon drops candy canes.&quot;,
        &quot;occupancy&quot;: {
          &quot;maxAdults&quot;: 2,
          &quot;maxChildren&quot;: 0,
          &quot;maxOverall&quot;: 2
        },
        &quot;disabledAccess&quot;: false,
        &quot;bedConfiguration&quot;: &quot;Twin&quot;,
        &quot;images&quot;: [
          {
            &quot;url&quot;: &quot;https://rl-uk2.azureedge.net/picturemanager/images/OBMNG1/room3.jpg&quot;,
            &quot;alt&quot;: &quot;&quot;
          },
          {
            &quot;url&quot;: &quot;https://rl-uk2.azureedge.net/picturemanager/images/OBMNG1/music.jpg&quot;,
            &quot;alt&quot;: &quot;&quot;
          },
          {
            &quot;url&quot;: &quot;https://rl-uk2.azureedge.net/picturemanager/images/OBMNG1/livingroom.jpg&quot;,
            &quot;alt&quot;: &quot;&quot;
          }
        ],
  </code></pre>
  <p>I tried many ways to achieve this but I can not get it. On the screen, its need to be like hotel1 and 3 rooms of hotel1, then hotel2 and 3 rooms of hotel2 likewise rest of this and that is why I merged the response in the same way but now I am confused about how to display on-screen like the above format as I wrote. Could anyone help me with that? I really appreciated it. Thank you.</p>