done

package.json

@@ -6,7 +6,7 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
-    "axios": "^0.26.0",
+    "axios": "^0.26.1",
     "msw": "^0.38.2",
     "mutationobserver-shim": "^0.3.7",
     "react": "^17.0.2",

src/App.js

@@ -1,6 +1,21 @@
 import React from 'react';
-
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import Character from './components/Character'
 const App = () => {
+
+  const [characters,setCharacters] = useState([])
+  useEffect(() => {
+axios.get(`https://swapi.dev/api/people/`)
+.then(res=> {
+  console.log(res.data)
+setCharacters(res.data)
+})
+.catch(err => console.log(err))
+  }, [])
+
+
+
   // Try to think through what state you'll need for this app before starting. Then build out
   // the state properties here.
 
@@ -9,8 +24,13 @@ const App = () => {
   // sync up with, if any.
 
   return (
+
     <div className="App">
+
       <h1 className="Header">Characters</h1>
+      {characters.map(char => {
+        return <Character name={char.name} />
+      })}
     </div>
   );
 }

src/components/Character.js

@@ -1 +1,13 @@
 // Write your Character component here
+import React from 'react'
+
+function Character(props) {
+  return (  
+<div>
+  <h2>{props.name}</h2>
+  <button> Click to know more </button>
+</div>
+  )
+}
+
+export default Character

src/components/Details.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Details() {
+  return (
+    <div>Details</div>
+  )
+}
+
+export default Details