diff options
-rw-r--r-- | part2/courseinfo2/src/App.js | 56 | ||||
-rw-r--r-- | part2/courseinfo2/src/components/Course.js | 57 |
2 files changed, 58 insertions, 55 deletions
diff --git a/part2/courseinfo2/src/App.js b/part2/courseinfo2/src/App.js index 720ea29..186af0d 100644 --- a/part2/courseinfo2/src/App.js +++ b/part2/courseinfo2/src/App.js @@ -1,58 +1,4 @@ -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 parts = props.parts - const initialValue = 0 - - return (<p> Number of exercises {parts.reduce((sum, part) => { - return sum += part.exercises - - }, initialValue)} </p> - ) -} - -const Course = (props) => { - const header = props.course.name - const parts = props.course.parts - return ( - <> - <Header name={header} /> - <Content parts={parts} /> - <Total parts={parts} /> - </> - ) -} +import Course from './components/Course' const App = () => { const courses = [ diff --git a/part2/courseinfo2/src/components/Course.js b/part2/courseinfo2/src/components/Course.js new file mode 100644 index 0000000..e7c86e0 --- /dev/null +++ b/part2/courseinfo2/src/components/Course.js @@ -0,0 +1,57 @@ +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 parts = props.parts + const initialValue = 0 + + return (<p> Number of exercises {parts.reduce((sum, part) => { + return sum += part.exercises + + }, initialValue)} </p> + ) +} + +const Course = (props) => { + const header = props.course.name + const parts = props.course.parts + return ( + <> + <Header name={header} /> + <Content parts={parts} /> + <Total parts={parts} /> + </> + ) +} + +export default Course |