diff --git a/README.md b/README.md
index feab27c3a..4b979d3b4 100644
--- a/README.md
+++ b/README.md
@@ -79,6 +79,10 @@ After finishing your required elements, you can push your work further. These go
 Be prepared to demonstrate your understanding of this week's concepts by answering questions on the following topics. Put your answers underneath the questions:
 
 1. What is React JS and what problems does it solve? Support your answer with concepts introduced in class and from your personal research on the web.
+react uses coding to fill in javascript and create javascript code for us
 1. Describe component state.
+state is a staus, it can be changed or updated, like a button being closed or opened
 1. Describe props.
+props are a placeholder or variable
 1. What are side effects, and how do you sync effects in a React component to changes of certain state or props?
+side effects are secondary actions that happen when a function is called. for instance a change in state
diff --git a/package-lock.json b/package-lock.json
index 79208da2a..1f9f69df0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,12 +5,13 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "web-sprint-challenge-intro-to-react",
       "version": "0.1.1",
       "dependencies": {
         "@testing-library/jest-dom": "^5.12.0",
         "@testing-library/react": "^11.2.6",
         "@testing-library/user-event": "^13.1.8",
-        "axios": "^0.21.1",
+        "axios": "^0.21.4",
         "msw": "^0.28.2",
         "mutationobserver-shim": "^0.3.7",
         "react": "^17.0.2",
@@ -3531,11 +3532,11 @@
       }
     },
     "node_modules/axios": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
-      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
       "dependencies": {
-        "follow-redirects": "^1.10.0"
+        "follow-redirects": "^1.14.0"
       }
     },
     "node_modules/axobject-query": {
@@ -23348,11 +23349,11 @@
       "integrity": "sha512-1uIESzroqpaTzt9uX48HO+6gfnKu3RwvWdCcWSrX4csMInJfCo1yvKPNXCwXFRpJqRW25tiASb6No0YH57PXqg=="
     },
     "axios": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
-      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
       "requires": {
-        "follow-redirects": "^1.10.0"
+        "follow-redirects": "^1.14.0"
       }
     },
     "axobject-query": {
diff --git a/package.json b/package.json
index 7dbb6e8bd..c2f672945 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^13.1.8",
-    "axios": "^0.21.1",
+    "axios": "^0.21.4",
     "msw": "^0.28.2",
     "mutationobserver-shim": "^0.3.7",
     "react": "^17.0.2",
@@ -15,7 +15,7 @@
     "styled-components": "^5.3.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-scripts --openssl-legacy-provider start",
     "build": "react-scripts build",
     "test": "react-scripts test --silent --verbose",
     "eject": "react-scripts eject"
diff --git a/src/App.js b/src/App.js
index 5e69e9fdd..6104a7c20 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,69 @@
-import React from 'react';
+import React,{ useState, useEffect } from 'react';
 import './App.css';
+import axios from 'axios';
+import Character from './components/Character';
+// import characterData from 'https://swapi.dev/api/films/results';
+ const initialCharacters = [
+  {
+  name: "mike",
+  id:0,
+  height: 172, 
+  mass: 77, 
+  hair_color: "blond", 
+  skin_color: "fair", 
+  eye_color: "blue", 
+  birth_year: "19BBY", 
+  gender: "male", 
+},
+{
+  name: "carly",
+  id:1,
+  height: 172, 
+  mass: 77, 
+  birth_year: "19BBY", 
+  gender: "male", 
+}
+
+]
+
+
 
 const App = () => {
+  const [characters, setCharacter] = useState(initialCharacters)
+
+
+  const [currentCharacterId, setCurrentCharacterId] = useState(null)
   // Try to think through what state you'll need for this app before starting. Then build out
   // the state properties here.
 
   // Fetch characters from the API in an effect hook. Remember, anytime you have a 
   // side effect in a component, you want to think about which state and/or props it should
   // sync up with, if any.
+  useEffect(() => {
+    axios('https://swapi.dev/api/people')
+    .then((res) => {
+      setCharacter(res.data)
+    })
+    .catch((err) =>{
+      console.log('please come back soon')
+    })
+  }, []
+  )
+
+
 
-  return (
+  return ( 
     <div className="App">
-      <h1 className="Header">Characters</h1>
+      <h1 className="Header">
+        
+        {characters.map((character) => {
+          return <Character key={`App-characterMap-character${character.name}`} character={character}/>; })}
+          
+        
+
+      </h1>
     </div>
-  );
-}
+          
+        )}
 
 export default App;
diff --git a/src/components/Character.js b/src/components/Character.js
index 4083249c0..eb55908e3 100644
--- a/src/components/Character.js
+++ b/src/components/Character.js
@@ -1 +1,18 @@
+import React from "react";
+
+
+const Character = ({character}) => {
+
+    return(
+        <article > 
+        <h2>{character.name}</h2>
+        <p>{character.height}</p>
+        <p>{character.mass}</p>
+        <p>{character.birth_year}</p>  
+        <p>{character.gender}</p>  
+        </article>
+    )
+}
+
 // Write your Character component here
+export default Character
\ No newline at end of file