aboutsummaryrefslogtreecommitdiff
path: root/part2/courseinfo2/src/App.js
diff options
context:
space:
mode:
Diffstat (limited to 'part2/courseinfo2/src/App.js')
-rw-r--r--part2/courseinfo2/src/App.js81
1 files changed, 81 insertions, 0 deletions
diff --git a/part2/courseinfo2/src/App.js b/part2/courseinfo2/src/App.js
new file mode 100644
index 0000000..f1bc1ef
--- /dev/null
+++ b/part2/courseinfo2/src/App.js
@@ -0,0 +1,81 @@
+const Header = (props) => {
+ const header = props.name
+ return (
+ <h1>{header}</h1>
+ )
+}
+
+const Part = (props) => {
+ const name = props.name
+ const exercises = props.exercises
+
+ return (
+ <p>{name} {exercises}</p>
+ )
+}
+
+const Content = (props) => {
+ //const object_1 = props.parts.parts[0]
+ //const object_2 = props.parts.parts[1]
+ //const object_3 = props.parts.parts[2]
+ const parts = props.parts
+
+ return (
+ <>
+ {parts.map((part) => {
+ return (
+ <Part name={part.name} exercises={part.exercises} />
+ )})
+ }
+ </>
+ )
+}
+
+const Total = (props) => {
+ const one = props.parts.parts[0].exercises
+ const two = props.parts.parts[1].exercises
+ const three = props.parts.parts[2].exercises
+
+ return (
+ <p>Number of exercises {one + two + three}</p>
+ )
+}
+
+const Course = (props) => {
+ const header = props.course.name
+ const parts = props.course.parts
+ return (
+ <>
+ <Header name={header} />
+ <Content parts={parts} />
+ </>
+ )
+}
+
+const App = () => {
+ const course = {
+ id: 1,
+ name: 'Half Stack application development',
+ parts: [
+ {
+ name: 'Fundamentals of React',
+ exercises: 10,
+ id: 1
+ },
+ {
+ name: 'Using props to pass data',
+ exercises: 7,
+ id: 2
+ },
+ {
+ name: 'State of a component',
+ exercises: 14,
+ id: 3
+ }
+ ]
+ }
+
+ return <Course course={course} />
+}
+
+export default App