remove total, reformat
This commit is contained in:
parent
ec568c4e9b
commit
1d48e78d7f
1 changed files with 29 additions and 40 deletions
|
|
@ -1,63 +1,52 @@
|
|||
const Header = (props) => {
|
||||
return <h1>{props.course}</h1>
|
||||
}
|
||||
return <h1>{props.course}</h1>;
|
||||
};
|
||||
|
||||
const Part = (props) => {
|
||||
return <p>{props.partName} {props.exerciseCount}</p>
|
||||
|
||||
}
|
||||
return (
|
||||
<p>
|
||||
{props.partName} {props.exerciseCount}
|
||||
</p>
|
||||
);
|
||||
};
|
||||
|
||||
const Content = (props) => {
|
||||
return (
|
||||
<>
|
||||
{props.sections.map((section) => {
|
||||
return <Part partName={section.part} exerciseCount={section.exerciseCount}/>
|
||||
return (
|
||||
<Part partName={section.part} exerciseCount={section.exerciseCount} />
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const Total = (props) => {
|
||||
return (
|
||||
<>
|
||||
<p>Number of exercises {props.sections.reduce(
|
||||
(sum, section) => {
|
||||
return sum + section.exerciseCount
|
||||
},
|
||||
0
|
||||
)}</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
const App = () => {
|
||||
const course = {
|
||||
name: 'Half Stack application development',
|
||||
name: "Half Stack application development",
|
||||
sections: [
|
||||
{
|
||||
part: 'Fundamentals of React',
|
||||
exerciseCount: 10
|
||||
part: "Fundamentals of React",
|
||||
exerciseCount: 10,
|
||||
},
|
||||
{
|
||||
part: 'Using props to pass data',
|
||||
exerciseCount: 7
|
||||
part: "Using props to pass data",
|
||||
exerciseCount: 7,
|
||||
},
|
||||
{
|
||||
part: 'State of a component',
|
||||
exerciseCount: 14
|
||||
part: "State of a component",
|
||||
exerciseCount: 14,
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Header course={course.name}/>
|
||||
<Content sections={course.sections}/>
|
||||
<Total sections={course.sections}/>
|
||||
<Header course={course.name} />
|
||||
<Content sections={course.sections} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default App
|
||||
export default App;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue