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.