course content

Course Content

Introduction to React

Creating React ComponentsCreating 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.

Hint
1. Use the map method for converting the array into <li> elements.
2. Inside the map element, you will embed two values from the array's item: name and grade.
3. Use the syntax data.map (student => ( )); for the map method. Here student represents a member of the data array.
4. Use the code <li>{student.name} - {getGrade(student.score)}</li> inside the map method for creating the <li> elements containing the required content. The getGrade function here takes in the student.score value and returns the calculated grade.
Solution

Section 4.

Chapter 3