Add a simple character details listing

src/App.js

@@ -1,7 +1,7 @@
 import React from "react";
 import logo from "./assets/rebel_alliance_logo.png";
 import "./App.css";
-import { ListCharacters } from "./list-characters";
+import { CharacterDetails } from "./character-details";
 
 function App() {
   return (
@@ -10,9 +10,7 @@ function App() {
         <img src={logo} className="App-logo" alt="logo" />
         Star Wars
       </header>
-      <div>
-        Characters: <ListCharacters />
-      </div>
+      <CharacterDetails />
     </div>
   );
 }

src/character-details.js

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import { ListCharacters } from "./list-characters";
+
+export function CharacterDetails() {
+  const [character, setCharacter] = useState(null);
+
+  const charProps = character && Object.entries(character);
+  return (
+    <div>
+      Characters: <ListCharacters onChange={setCharacter} />
+      {charProps &&
+        charProps.map(([key, value]) => {
+          if (typeof value === "string")
+            return (
+              <p>
+                {key}: {value}
+              </p>
+            );
+          return null;
+        })}
+    </div>
+  );
+}