starwars parmosie all sapient

Example heading with h2 size

Example heading with h3 size

Following is sample java code.

import React, { useState, useEffect } from 'react';
import './style.css'
function StarWarsCharacters() {
  const [characters, setCharacters] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    const fetchCharacters = async () => {
      try {
        const response = await fetch('https://swapi.dev/api/people/');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        const charactersWithDetails = await Promise.all(
          data.results.map(async (character) => {
            const films = await Promise.all(
              character.films.map(async (filmUrl) => {
                const filmResponse = await fetch(filmUrl);
                if (!filmResponse.ok) {
                  console.error(
                    `Error fetching film: ${filmUrl}`,
                    filmResponse.status
                  );
                  return { title: 'Error fetching film' };
                  // Handle error gracefully
                }
                const filmData = await filmResponse.json();
                return { title: filmData.title };
              })
            );
            const vehicles = await Promise.all(
              character.vehicles.map(async (vehicleUrl) => {
                const vehicleResponse = await fetch(vehicleUrl);
                if (!vehicleResponse.ok) {
                  console.error(
                    `Error fetching vehicle: ${vehicleUrl}`,
                    vehicleResponse.status
                  );
                  return { name: 'Error fetching vehicle' };
                  // Handle error gracefully
                }
                const vehicleData = await vehicleResponse.json();
                return { name: vehicleData.name };
              })
            );
            return { ...character, films: films, vehicles: vehicles };
          })
        );
        setCharacters(charactersWithDetails);
      } catch (err) {
        setError(err);
        console.error('Error fetching data:', err);
        // Log the detailed error
      } finally {
        setLoading(false);
      }
    };
    fetchCharacters();
  }, []);
  if (loading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Error: {error.message}</div>;
  }
  return (
    <div>
      {' '}
      <h1>Star Wars Characters</h1>{' '}
      <table>
        {' '}
        <thead>
          {' '}
          <tr>
            {' '}
            <th>Name</th> <th>Height</th> <th>Mass</th> <th>Hair Color</th>{' '}
            <th>Skin Color</th> <th>Eye Color</th> <th>Birth Year</th>{' '}
            <th>Gender</th> <th>Homeworld</th> <th>Films</th> <th>Vehicles</th>{' '}
          </tr>{' '}
        </thead>{' '}
        <tbody>
          {' '}
          {characters.map((character) => (
            <tr key={character.url}>
              {' '}
              <td>{character.name}</td> <td>{character.height}</td>{' '}
              <td>{character.mass}</td> <td>{character.hair_color}</td>{' '}
              <td>{character.skin_color}</td> <td>{character.eye_color}</td>{' '}
              <td>{character.birth_year}</td> <td>{character.gender}</td>{' '}
              <td>
                {' '}
                <a
                  href={character.homeworld}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {' '}
                  {
                    character.homeworld
                  } {/* Or fetch and display planet name */}{' '}
                </a>{' '}
              </td>{' '}
              <td>
                {' '}
                <ul>
                  {' '}
                  {character.films.map((film) => (
                    <li key={film.title}>{film.title}</li>
                  ))}{' '}
                </ul>{' '}
              </td>{' '}
              <td>
                {' '}
                <ul>
                  {' '}
                  {character.vehicles.map((vehicle, index) => (
                    <li key={index}>{vehicle.name}</li>
                  ))}{' '}
                </ul>{' '}
              </td>{' '}
            </tr>
          ))}{' '}
        </tbody>{' '}
      </table>{' '}
    </div>
  );
}
export default StarWarsCharacters;