read me and yarn installed

README.md

@@ -22,22 +22,22 @@ In this project you will build out a calculator using React. You have been given
 
 This project was put together using create-react-app (CRA). You will not need to install CRA in order to make this project work. Follow the steps below to setup the project with the proper dependencies.
 
-- [ ] Create a forked copy of this project.
-- [ ] Add your team lead as collaborator on Github.
-- [ ] Clone your OWN version of the repository in your terminal
-- [ ] CD into the project base directory `cd lambda-calculator`
-- [ ] Download project dependencies by running one of these two commands `yarn` or `npm install`
-- [ ] Using the same command tool (yarn or npm) start up the app using `yarn start` or `npm start`
-- [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
+- [x] Create a forked copy of this project.
+- [x] Add your team lead as collaborator on Github.
+- [x] Clone your OWN version of the repository in your terminal
+- [x] CD into the project base directory `cd lambda-calculator`
+- [x] Download project dependencies by running one of these two commands `yarn` or `npm install`
+- [x] Using the same command tool (yarn or npm) start up the app using `yarn start` or `npm start`
+- [x] Create a new branch: git checkout -b `<firstName-lastName>`.
       Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
-- [ ] Push commits: git push origin `<firstName-lastName>`.
+- [x] Push commits: git push origin `<firstName-lastName>`.
 
 Follow these steps for completing your project.
 
-- [ ] Submit a Pull-Request to merge Branch into master (student's Repository). **Please don't merge your own pull request**
-- [ ] Add your team lead as a reviewer on the pull-request
-- [ ] Your team lead will count the project as complete by merging the branch back into master.
-- [ ] Do your magic!
+- [x] Submit a Pull-Request to merge Branch into master (student's Repository). **Please don't merge your own pull request**
+- [x] Add your team lead as a reviewer on the pull-request
+- [x] Your team lead will count the project as complete by merging the branch back into master.
+- [x] Do your magic!
 
 # _Project - Lambda Calculator_
 

src/App.js

@@ -2,7 +2,10 @@ import React from "react";
 import "./App.css";
 // STEP 4 - import the button and display components
 // Don't forget to import any extra css/scss files you build into the correct component
-
+import Specials from './components/ButtonComponents/SpecialButtons/Specials'
+import Numbers from './components/ButtonComponents/NumberButtons/Numbers'
+import Operators from './components/ButtonComponents/OperatorButtons/Operators'
+import Display from './components/DisplayComponents/Display'
 // Logo has already been provided for you. Do the same for the remaining components
 import Logo from "./components/DisplayComponents/Logo";
 
@@ -18,6 +21,10 @@ function App() {
       <Logo />
       <div className="App">
         {/* STEP 4 - Render your components here and be sure to properly import/export all files */}
+        <Operators />
+        <Specials />
+        <Numbers />
+        <Display />
       </div>
     </div>
   );

src/components/ButtonComponents/NumberButtons/NumberButton.js

@@ -1,9 +1,11 @@
 import React from "react";
 
-const NumberButton = () => {
+const NumberButton = (props) => {
   return (
     <>
       {/* Display a button element rendering the data being passed down from the parent container on props */}
+      <button>{props.numbers}</button>
     </>
   );
 };
+export default NumberButton;

src/components/ButtonComponents/NumberButtons/Numbers.js

@@ -1,16 +1,26 @@
-import React from "react";
+import React, { useState } from "react";
 
 //import any components needed
-
+import NumberButton from './NumberButton'
 //Import your array data to from the provided data file
+import { numbers } from '../../../data'
 
-const Numbers = () => {
+const Numbers = (props) => {
   // STEP 2 - add the imported data to state
+  //console.log('numbers', numbers)
+  const [numberState, setNumberState] = useState(numbers)
+
   return (
     <div>
       {/* STEP 3 - Use .map() to iterate over your array data and return a button
        component matching the name on the provided file. Pass
        it any props needed by the child component*/}
+
+      {numbers.map(number => {
+        return <NumberButton numbers={number} />
+      })}
+
     </div>
   );
 };
+export default Numbers;

src/components/ButtonComponents/OperatorButtons/OperatorButton.js

@@ -1,9 +1,13 @@
 import React from "react";
+import { operators } from '../../../data'
 
-const OperatorButton = () => {
+
+const OperatorButton = (props) => {
   return (
     <>
       {/* Display a button element rendering the data being passed down from the parent container on props */}
+      <button>{props.operators.char}</button>
     </>
   );
 };
+export default OperatorButton;

src/components/ButtonComponents/OperatorButtons/Operators.js

@@ -1,16 +1,25 @@
-import React from "react";
+import React, { useState } from "react";
 
 //import any components needed
+import OperatorButton from './OperatorButton'
 
 //Import your array data to from the provided data file
+import { operators } from '../../../data'
 
-const Operators = () => {
+let Operators = () => {
   // STEP 2 - add the imported data to state
+  // console.log('operators', operators)
+  const [operatorState, setOperatorState] = useState(operators)
+
   return (
     <div>
       {/* STEP 3 - Use .map() to iterate over your array data and return a button
        component matching the name on the provided file. Pass
        it any props needed by the child component*/}
+      {operators.map(operator => {
+        return <OperatorButton operators={operator} />
+      })}
     </div>
   );
 };
+export default Operators;

src/components/ButtonComponents/SpecialButtons/SpecialButton.js

@@ -1,9 +1,11 @@
 import React from "react";
 
-const SpecialButton = () => {
+const SpecialButton = (props) => {
   return (
     <>
       {/* Display a button element rendering the data being passed down from the parent container on props */}
+      <button>{props.specials}</button>
     </>
   );
 };
+export default SpecialButton;

src/components/ButtonComponents/SpecialButtons/Specials.js

@@ -1,17 +1,26 @@
-import React from "react";
+import React, { useState } from "react";
 
 //import any components needed
+import SpecialButton from './SpecialButton'
 
 //Import your array data to from the provided data file
+import { specials } from '../../../data'
 
 const Specials = () => {
   // STEP 2 - add the imported data to state
+  const [specialState, setSpecialState] = useState(specials);
 
   return (
     <div>
       {/* STEP 3 - Use .map() to iterate over your array data and return a button
        component matching the name on the provided file. Pass
        it any props needed by the child component*/}
+
+      {specials.map(special => {
+        return <SpecialButton specials={special} />
+      })}
+
     </div>
   );
 };
+export default Specials;

src/components/DisplayComponents/Display.js

@@ -1,5 +1,13 @@
 import React from "react";
 
 const Display = () => {
-  return <div className="display">{/* Display any props data here */}</div>;
+
+  return <div>{/* Display any props data here */}</div>
+  return (
+    <div></div>
+  )
+
+
 };
+
+export default Display;

src/data.js

@@ -4,9 +4,9 @@
 // file. No real tricks here just be aware of what is in each array
 // and how you'll access the data.
 
-const numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "."];
+export const numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "."];
 
-const operators = [
+export const operators = [
   {
     char: "/",
     value: "/"
@@ -29,4 +29,5 @@ const operators = [
   }
 ];
 
-const specials = ["C", "+/-", "%"];
+export const specials = ["C", "+/-", "%"];
+

yarn.lock

@@ -6832,14 +6832,15 @@ react-dev-utils@^9.0.1:
     strip-ansi "5.2.0"
     text-table "0.2.0"
 
-react-dom@16.8.6:
-  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
+react-dom@^16.8.6:
+  version "16.9.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962"
+  integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.6"
+    scheduler "^0.15.0"
 
 react-error-overlay@^5.1.6:
   version "5.1.6"
@@ -6908,14 +6909,14 @@ react-scripts@3.0.1:
   optionalDependencies:
     fsevents "2.0.6"
 
-react@16.8.6:
-  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
+react@^16.8.6:
+  version "16.9.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"
+  integrity sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.6"
 
 read-pkg-up@^2.0.0:
   version "2.0.0"
@@ -7285,9 +7286,10 @@ saxes@^3.1.9:
   dependencies:
     xmlchars "^1.3.1"
 
-scheduler@^0.13.6:
-  version "0.13.6"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
+scheduler@^0.15.0:
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.15.0.tgz#6bfcf80ff850b280fed4aeecc6513bc0b4f17f8e"
+  integrity sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"