Component State checkpoint

part1/src/App.js

@@ -1,70 +1,46 @@
-const Header = (props) => {
+import { useState } from 'react'
+
+const Display = ({ counter }) => {
 	return (
-		<h1>
+		<div>{counter}</div>
-			{props.course.course}
-		</h1>
 	)
 }
 
-const Part = (props) => {
+const Button = ({ handleClick, text }) => {
-	console.log(props)
 	return (
-		<>
+		<button onClick={handleClick}>
-			<p>
+			{text}
-				{props.part.name} {props.part.exercises}
+		</button>
-			</p>
-		</>
-	)
-}
-
-const Content = (props) => {
-	return (
-		<>
-			<Part part={props.course.parts[0]} />
-			<Part part={props.course.parts[1]} />
-			<Part part={props.course.parts[2]} />
-		</>
-	)
-}
-
-const Total = (props) => {
-	const total = props.course.parts[0].exercises + props.course.parts[1].exercises + props.course.parts[2].exercises
-	return (
-		<>
-			<p>
-				Number of exercises {total}
-			</p>
-		</>
 	)
 }
 
 const App = () => {
-	const title = 'Half Stack application development'
+	const [counter, setCounter] = useState(0)
-	const part1 = {
+	console.log('rendering with counter value', counter)
-		name: 'Fundamentals of React',
+	const increaseByOne = () => {
-		exercises: 10
+		console.log('increasing, value before', counter)
+		setCounter(counter + 1)
 	}
-	const part2 = {
+
-		name: 'Using props to pass data',
+	const decreaseByOne = () => {
-		exercises: 7
+		console.log('decreasing, value before', counter)
+		setCounter(counter - 1)
 	}
-	const part3 = {
+
-		name: 'State of a component',
+	const setToZero = () => {
-		exercises: 14
+		console.log('resetting to zero, value before', counter)
-	}
+		setCounter(0)
-	const parts = [part1, part2, part3]
-	const course = {
-		course: title,
-		parts: parts
 	}
 
 	return (
 		<div>
-			<Header course={course} />
+			<Display counter={counter} />
-			<Content course={course} />
+			<Button handleClick={increaseByOne} text="plus" />
-			<Total course={course} />
+			<Button handleClick={setToZero} text="zero" />
+			<Button handleClick={decreaseByOne} text="minus" />
 		</div>
 	)
+
 }
 
 export default App