1 of 17

Conditional Rendering &

Rendering Lists &

Handling Events

React Week 04

2 of 17

Schedule

01

02

03

04

05

07

08

06

Recap

Conditional Rendering

Exercise

Break!

Rendering Lists

Handling events

Let’s code together !

15 min

10 min

15 min

3 of 17

Recap

Previously on ReDi React

Components and component types�State vs Props�Special Props ( key ,children ,ref )

4 of 17

Conditional Rendering

conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them

Let’s code the example together:�https://codesandbox.io/s/conditional-rendering-jxe4g

5 of 17

Exercise 01

Let’s create a real world example !

A navbar with login button VS logout button and a user greeting

https://codesandbox.io/s/conditional-rendering-exercises-wsp25

6 of 17

Questions?

7 of 17

Rendering Lists

When you need to render multiple similar components
When you don’t know how many items you need to render
In React we use map() to loop over an array and render a list

8 of 17

Key prop

React will warn you that a key should be provided for list items
A “key” is a special string attribute you need to include when creating lists of elements
Keys help React identify which items have changed, are added, or are removed
When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort ( which is the default behavior of React )
A good rule of thumb is that elements inside the map() call need keys.