Rendering Data in React

31mIntermediate2025-05-07

Authors

Maaike van Putten

Trainer and Developer for Java, Python, Spring Boot, and More

Course details

This course focuses on the techniques for rendering data in React, starting with simple static elements, moving on to arrays, nested data, and conditional logic. It also covers how to filter and sort data to make the interface dynamic and interactive. On top of that, instructor Maaike van Putten shows you how to add pagination to handle larger lists to make the application perform well and not overwhelm the user. After every explanation, there's the opportunity to get hands-on practice right away.

Learning objectives
Present static and dynamic data in the user interface.
Work with filtering, sorting, conditionally rendering, and more to create dynamic UIs.
Split data into pages to keep the applications performant.

Skills covered

React.jsMetaFront-End Web DevelopmentWeb DevelopmentOne-Off

Concepts

0. Introduction

01 - Rendering data in React
02 - What you should know
03 - CoderPad tour

1. Rendering Static Data

04 - Basics of rendering static data
05 - Solution - Receiving and displaying props

2. Rendering Lists of Data

06 - Rendering lists with keys
07 - Solution - Using map to render arrays

3. Conditional Rendering

08 - Rendering elements based on conditions
09 - Solution - Conditionally render a list

4. Rendering Nested Data

10 - Rendering nested data
11 - Solution - Render a list of objects

5. Filtering Data

12 - Using the filter function to render filtered data
13 - Solution - Filtering a list real time

6. Sorting Data

14 - Re-rendering sorted data when the order changes
15 - Solution - Sort the list of objects alphabetically

7. Data Pagination

16 - Splitting data into pages
17 - Solution - Only five items at a time

Conclusion

18 - Other React topics to explore