refactored a little using react-hooks

Contributors.md

@@ -49,3 +49,5 @@
 -[@AbSamad99](https://github.com/AbSamad99)
 
 -[@LichtZinnig](https://github.com/LichtZinnig)
+
+-[@meaqua-suki](https://github.com/meaqua-suki)

React_files/src/components/Cards/Card.js

@@ -1,39 +1,38 @@
 import React, { Component } from "react";
 import "./Card.css";
 
-class Card extends Component {
-	render() {
+const Card = ({onWasteTypeChange,onWasteWeightChange,handleClick,waste}) => {	
 		return (
 			<div className="tc pa2 ma1 bw2 shadow-5 trash-dump-card">
 				<input
 					className="pa2 w-20 waste-name"
-					value={this.props.waste}
+					value={waste.type}
 					type="text"
 					placeholder="Name of the Waste"
-					onChange={this.props.onWaste}
+					onChange={onWasteTypeChange}
 				/>
 				<input
 					className="pa2 w-20 weight-in-kg"
-					value={this.props.weight}
+					value={waste.weight}
 					type="number"
 					placeholder="Weight number in kg"
-					onChange={this.props.onWeight}
+					onChange={onWasteWeightChange}
 				/>
 
 				<button
 					className={
-						this.props.waste && this.props.weight
+						waste.type && waste.weight
 							? "submit-button"
 							: "submit-button-deactivated"
 					}
 					// Send onClick event to parent
-					onClick={this.props.handleClick}
+					onClick={handleClick}
 				>
 					Submit
 				</button>
 			</div>
 		);
 	}
-}
+
 
 export default Card;

React_files/src/components/ResultBox/ResultBox.js

@@ -2,12 +2,12 @@ import React from 'react';
 import Score from '../Score/Score'
 import "./ResultBox.css"
 
-const ResultBox= ({waste, weight, recycling}) => {
+const ResultBox= ({type, weight, recycling}) => {
 
 	return(
 		<div className='result tc pa3 ma2 bw2 shadow-5 results-card'>
 		   <h1 className='f2 black'>RESULT</h1>
-           <div><Score waste={waste} weight={weight} recycling={recycling} /></div>
+           <div><Score type={type} weight={weight} recycling={recycling} /></div>
 		</div>
 		);
 }

React_files/src/components/Score/Score.js

@@ -1,38 +1,42 @@
 import React from 'react';
 
-const Score = ({ waste, weight, recycling }) => {
-  if (!recycling.includes(waste)) {
+const Score = ({ type, weight, recycling }) => {
+  if (!recycling.includes(type)) {
     return (
       <div>
-        <h2 class='result_level1'>Yikes, you can't recycle that!</h2>
-        <h3 class='result_level2'>Find out what you can recycle <a href='https://www.recyclenow.com/what-to-do-with' target="_blank" rel="noopener noreferrer">here.</a></h3>
+        <h2 
+// @ts-ignore
+        class='result_level1'>Yikes, you can't recycle that!</h2>
+        <h3 
+// @ts-ignore
+        class='result_level2'>Find out what you can recycle <a href='https://www.recyclenow.com/what-to-do-with' target="_blank" rel="noopener noreferrer">here.</a></h3>
       </div>
     );
     } else {
-      if (waste.length && weight >= 100) {
+      if (type.length && weight >= 100) {
         return (
           <div>
             <h2>Congrats! You are a Recycling King</h2>
             <h3>
-              Recycled {weight}kg of {waste}
+              Recycled {weight}kg of {type}
             </h3>
           </div>
         );
-      } else if (waste.length && weight >= 50 && waste.length && weight < 100) {
+      } else if (type.length && weight >= 50 && type.length && weight < 100) {
         return (
           <div>
             <h2>Congrats! You are a good Recycler</h2>
             <h3>
-              Recycled {weight}kg of {waste}
+              Recycled {weight}kg of {type}
             </h3>
           </div>
         );
-      } else if (waste.length && weight < 50 && waste.length && weight > 0) {
+      } else if (type.length && weight < 50 && type.length && weight > 0) {
         return (
           <div>
             <h2>Congrats! You did good but you can do better next time</h2>
             <h3>
-              Recycled {weight}kg of {waste}
+              Recycled {weight}kg of {type}
             </h3>
           </div>
         );

React_files/src/containers/App.js

@@ -1,56 +1,61 @@
-import React, { Component } from "react";
+import React, { Component, useState, useEffect } from "react";
 import "./App.css";
 import Card from "../components/Cards/Card";
 import ResultBox from "../components/ResultBox/ResultBox";
 import Trash from "../components/Trash/Trash";
 
-class App extends Component {
-	constructor(props) {
-		super(props);
+const App = () =>  {
+	const [waste,setWaste] = useState({
+		type:"",
+		weight: 0,
+		location: ""
+	});
+	const [isRender,setRender] = useState(false);
+	const recycling =['plastic', 'pet', 'hdpe', 'ldpe', 'pp', 'metal', 'tin', 'aluminium', 'steel', 'cardboard', 'paper', 'glass']
 
-		this.state = {
-			waste: "",
-			weight: "",
-			location: "",
-			renderResults: false,
-			recycling: ['plastic', 'pet', 'hdpe', 'ldpe', 'pp', 'metal', 'tin', 'aluminium', 'steel', 'cardboard', 'paper', 'glass'],
-		};
-	}
 
-	onWasteChange = event => {
-		let waste = event.target.value.toLowerCase();
-		this.setState({ waste: waste, renderResults: false });
+	const onWasteTypeChange = event => {
+		let wasteType = event.target.value.toLowerCase();
+		setWaste({
+			...waste,
+			type:wasteType
+		});
+
 	};
 
-	onWeightChange = event => {
-		this.setState({ weight: event.target.value, renderResults: false });
+	const onWasteWeightChange = event => {
+		setWaste({
+			...waste,
+			weight:event.target.value
+		});
+
+		setRender(false);		
 	};
 
-	handleClick = () => {
-		if (this.state.waste && this.state.weight) {
-			this.setState({ renderResults: true });
+	const handleClick = () => {
+		if (waste.type && waste.weight) {
+			setRender(!isRender)
 		}
 	};
 
-	render() {
+
 		return (
 			<div className="App">
 				<Trash />
 				<Card
-					onWaste={this.onWasteChange}
-					onWeight={this.onWeightChange}
-					waste={this.state.waste}
-					weight={this.state.weight}
+					onWasteTypeChange={onWasteTypeChange}
+					onWasteWeightChange={onWasteWeightChange}
+					waste={waste}					
 					// Bring submit button onclick event to parent
-					handleClick={this.handleClick.bind(this)}
+					handleClick={handleClick}
 				/>
 				{/* CONDITIONALLY RENDER RESULTS */}
-				{this.state.renderResults ? (
-					<ResultBox waste={this.state.waste} weight={this.state.weight} recycling={this.state.recycling} />
+				{isRender ? (
+					<ResultBox type={waste.type} weight={waste.weight} recycling={recycling} />
 				) : null}
 			</div>
 		);
-	}
+
 }
 
 export default App;