ArrayFetch

// data.js
export const people = [
  { id: 0, name: "Creola Katherine Johnson", profession: "mathematician" },
  { id: 1, name: "Mario José Molina-Pasquel Henríquez", profession: "chemist" },
  { id: 2, name: "Mohammad Abdus Salam", profession: "physicist" },
  { id: 3, name: "Percy Lavon Julian", profession: "chemist" },
  { id: 4, name: "Subrahmanyan Chandrasekhar", profession: "astrophysicist" },
];

// List.tsx
import { people } from "./data";

interface Person {
  id: number;
  name: string;
  profession: string;
}

const List = () => {
  const personById = (id: number) => {
    return people.filter((person: Person) => person.id === id);
  };

  const personWithId2 = personById(2);
  console.log(personWithId2); // Output: [{ id: 2, name: 'Mohammad Abdus Salam', profession: 'physicist' }]

  return (
    <ul>
      {personWithId2.map((person: Person) => (
        <li key={person.id}>{person.name}</li>
      ))}
    </ul>
  );
};

export default List;

// App.tsx
import "./App.css";
import Alert from "./components/Alert";
import List from "./list";

function App() {
  return (
    <>
      <Alert>Hello World!</Alert>
      {/* <Message></Message> */}
      <List></List>
    </>
  );
}

export default App;


// This code displays the details of the person with id 2