diff --git a/README.md b/README.md
index feab27c3a..6a3e6c81e 100644
--- a/README.md
+++ b/README.md
@@ -12,13 +12,13 @@ You are not allowed to collaborate during the sprint challenge.
## Project Set Up
-- [ ] Fork and clone the repo. Delete your old fork from Github first if you are repeating this Unit.
-- [ ] Open the assignment in Canvas and click on the "Set up git" option (Or, depending, if you see something along the lines of 'Load Sprint Challenge Submission in a new window' click that).
-- [ ] Wire your fork to Codegrade using the "Click here for instructions on setting up Git submissions" link, select Github, authorize Github.
-- [ ] Push your first commit: `git commit --allow-empty -m "first commit" && git push`. MAKE SURE TO PUSH TO MAIN, YOU NO LONGER NEED TO CREATE A NEW BRANCH!!
-- [ ] Make commits often! PUSH TO MAIN!!!
-- [ ] You can run tests locally by running npm run test.
-- [ ] Check to see that Codegrade has accepted your git submission.
+- [ X] Fork and clone the repo. Delete your old fork from Github first if you are repeating this Unit.
+- [X ] Open the assignment in Canvas and click on the "Set up git" option (Or, depending, if you see something along the lines of 'Load Sprint Challenge Submission in a new window' click that).
+- [ X] Wire your fork to Codegrade using the "Click here for instructions on setting up Git submissions" link, select Github, authorize Github.
+- [X ] Push your first commit: `git commit --allow-empty -m "first commit" && git push`. MAKE SURE TO PUSH TO MAIN, YOU NO LONGER NEED TO CREATE A NEW BRANCH!!
+- [ X] Make commits often! PUSH TO MAIN!!!
+- [X ] You can run tests locally by running npm run test.
+- [ X] Check to see that Codegrade has accepted your git submission.
## Project Instructions
@@ -79,6 +79,12 @@ 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.
+-We needed a way to build applications that can take care of a lot of the work for us. React interacts with the virtual DOM and renders it to the actual DOM. React provides a smooth experience for users, and developers.
+
1. Describe component state.
+- Component is a loose term to describe a discrete chunk of your site. It is a regular JS function.
1. Describe props.
+- When we want to pass information held on state inside one component to another, we pass them as props. We never make changes to props data, because they are read-only.
1. What are side effects, and how do you sync effects in a React component to changes of certain state or props?
+- Side Effects is anything that affects something outside the scope of the function being executed. Fetching data from an API, timers, logging, and manually manipulating the DOM are all examples of side effects.
+- We sync effects by passing in a dependency array as the second argument to the effect hook.
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 79208da2a..1ca867df7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
"requires": true,
"packages": {
"": {
+ "name": "web-sprint-challenge-intro-to-react",
"version": "0.1.1",
"dependencies": {
"@testing-library/jest-dom": "^5.12.0",
diff --git a/src/App.js b/src/App.js
index 5e69e9fdd..182d07f9c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,90 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
import './App.css';
+import axios from 'axios';
+import Character from './components/Character';
+import styled from 'styled-components';
+import Details from './components/Details';
const App = () => {
+
// Try to think through what state you'll need for this app before starting. Then build out
// the state properties here.
-
+ const [starFolk,setStarFolk] = useState(null);
+ const [buttonOpen, setButtonOpen]= useState(null)
// 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.
+
+ const openDetails = id =>
+ {
+ const character = starFolk.filter(item => item.id === id);
+ setButtonOpen(character);
+ };
+
+ const closeDetails = () =>
+ {
+ setButtonOpen(null);
+ };
+
+
+
+ useEffect(() => {
+ axios.get('https://swapi.dev/api/people')
+ .then(res => {
+ setStarFolk(res.data.results);
+ setStarFolk(res.data);
+
+ const characters = res.data;
+
+ let id = 1;
+ characters.forEach(item => item.id = id++);
+ console.log(characters);
+ setStarFolk(characters);
+ })
+ .catch(err => {
+ console.error(err)
+ })
+ }, []);
+
+
+
+ const StarDiv = styled.div`
+ margin: 0 auto;
+ box-sizing: border-box;
+ width: 50%;
+ display:flex;
+ flex-direction:column;
+ justify-content:space-between;
+
+ margin-bottom:10%;
+ button {
+ width: 30%;
+ margin-left:35%;
+ }
+
+`
+
return (