diff options
Diffstat (limited to 'part2/courseinfo2/src/App.js')
-rw-r--r-- | part2/courseinfo2/src/App.js | 81 |
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 |