66 lines
1.2 KiB
JavaScript
66 lines
1.2 KiB
JavaScript
const Header = (props) => {
|
|
return <h1>{props.course}</h1>;
|
|
};
|
|
|
|
const Part = (props) => {
|
|
return (
|
|
<p>
|
|
{props.part} {props.exercises}
|
|
</p>
|
|
);
|
|
};
|
|
|
|
const Content = (props) => {
|
|
return (
|
|
<div>
|
|
<Part part={props.part1} />
|
|
<Part part={props.part2} />
|
|
<Part part={props.part3} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Total = (props) => {
|
|
return <p>Number of exercises {props.part}</p>;
|
|
};
|
|
|
|
const App = () => {
|
|
const course = {
|
|
name: "Half Stack application development",
|
|
parts: [
|
|
{
|
|
name: "Fundamentals of React",
|
|
exercises: 10,
|
|
},
|
|
{
|
|
name: "Using props to pass data",
|
|
exercises: 7,
|
|
},
|
|
{
|
|
name: "State of a component",
|
|
exercises: 14,
|
|
},
|
|
],
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Header course={course.name} />
|
|
<Content
|
|
part1={course.parts[0].name + " " + course.parts[0].exercises}
|
|
part2={course.parts[1].name + " " + course.parts[1].exercises}
|
|
part3={course.parts[2].name + " " + course.parts[2].exercises}
|
|
/>
|
|
<Total
|
|
part={
|
|
course.parts[0].exercises +
|
|
course.parts[1].exercises +
|
|
course.parts[2].exercises
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|