I have a root App that contains"Content" component, but now I wish to create three "Part" child component inside "Content". How should I do it ?
const Content = (props) => {
return (
<div>
<p>{props.part} {props.exercise}</p>
</div>
)
const App = () => {
const course = 'Half Stack application development'
const part1 = 'Fundamentals of React'
const exercises1 = 10
const part2 = 'Using props to pass data'
const exercises2 = 7
const part3 = 'State of a component'
const exercises3 = 14
return (
<div>
<Header course={course} />
<>Content:</>
<Content part={} exercise={}/>
<>Total:</>
<Total exercise={exercises1 + exercises2 +exercises3} />
</div>
)
}
Not completely sure, but this is the exmaple, I got
const Content = ... {
return (
<div>
<Part .../>
<Part .../>
<Part .../>
</div>
)
}
Question again: Refactor the Content component so that it does not render any names of parts or their number of exercises by itself. Instead it only renders three Part components of which each renders the name and number of exercises of one part.
You can keep the data of each part in an array and use map to render it. This is a normal pattern of doing it.
Try like this
import React from "react";
const Content = ({ content }) => {
return (
<div>
<p>
{content.part} {content.exercise}
</p>
</div>
);
};
const App = () => {
const course = "Half Stack application development";
const contents = [
{ part: "Fundamentals of React", exercise: 10 },
{ part: "Using props to pass data", exercise: 7 },
{ part: "State of a component", exercise: 14 }
];
return (
<div>
<Header course={course} />
<>Content:</>
{contents.map((content) => (
<Content content={content} />
))}
<>Total:</>
<Total exercise={exercises1 + exercises2 + exercises3} />
</div>
);
};
export default App;