Creating React Components
In the previous chapter, we explored how we can create components and what are the basic possibilities. There are, of course, more features related to components which we will explore in further chapters, but for now, we need to make sure that we have a good grasp of the concepts that have been discussed.
Task
The base code is already given with a data array containing some students' names and their scores. It also contains a getGrade function that takes in a score and outputs a grade.
Write a functional component called Grades at line 24 and create an unordered list inside it. Inside the list, use the data array to render list items having student names along with their grades in the form StudentName – Grade, for example, Aron - F.
You can use getGrade function to get the relevant grade. Also, don't forget to render the component inside the render method at line 36.
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Ställ mig frågor om detta ämne
Sammanfatta detta kapitel
Visa verkliga exempel
Awesome!
Completion rate improved to 2.7Creating React Components
Svep för att visa menyn
In the previous chapter, we explored how we can create components and what are the basic possibilities. There are, of course, more features related to components which we will explore in further chapters, but for now, we need to make sure that we have a good grasp of the concepts that have been discussed.
Task
The base code is already given with a data array containing some students' names and their scores. It also contains a getGrade function that takes in a score and outputs a grade.
Write a functional component called Grades at line 24 and create an unordered list inside it. Inside the list, use the data array to render list items having student names along with their grades in the form StudentName – Grade, for example, Aron - F.
You can use getGrade function to get the relevant grade. Also, don't forget to render the component inside the render method at line 36.
Tack för dina kommentarer!
