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

Introduction

Rendering data in React
What you should know
CoderPad tour

Rendering Static Data

Basics of rendering static data
Solution - Receiving and displaying props

Rendering Lists of Data

Rendering lists with keys
Solution - Using map to render arrays

Conditional Rendering

Rendering elements based on conditions
Solution - Conditionally render a list

Rendering Nested Data

Rendering nested data
Solution - Render a list of objects

Filtering Data

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

Sorting Data

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

Data Pagination

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

Conclusion

Other React topics to explore