Scribd
Upload
8 views16 pages

Lecture 04 - Handling Interactions

The document outlines key objectives for handling user interactions in React, including managing state and updating the UI. It discusses the use of event handlers, the useState Hook for state management, and provides exercises for practical application. Additionally, it covers best practices for updating objects and arrays in state, as well as mentions related topics like React Router and Redux.

Uploaded by

Yuu Ichi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views16 pages

Lecture 04 - Handling Interactions

The document outlines key objectives for handling user interactions in React, including managing state and updating the UI. It discusses the use of event handlers, the useState Hook for state management, and provides exercises for practical application. Additionally, it covers best practices for updating objects and arrays in state, as well as mentions related topics like React Router and Redux.

Uploaded by

Yuu Ichi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Handling Interactions

Objectives
◆ Handle user-initiated events
◆ Make components “remember” information with state
◆ Update the UI in two phases
◆ Update multiple state
◆ Update an object in state
◆ Update an array in state

2
Adding event handlers
◆ Handling events is similar to the way you handle events on DOM
elements:
◆ onClick instead of onclick. (camelCase)
◆ onClick={save} instead of onclick="save()"

3
Event Handler Example (1)

4
Event Handler Example (2)

5
State
◆ State is a component’s memory
◆ Using a useState Hook to add state to a component
◆ Hooks are special functions that let your components use React
features (state is one of those features)

6
useState Hook
◆ Iakes the initial state variable
◆ returns a pair of values: the current state, and a state setter function
that lets you update it.

7
Exercise 01
1. Login Form
 username = pass: alert thành công
2. Colors
3. Counter
4. Student Info
5. Clock

8
Exercise 02 - Menu

9
Exercise 03

10
React batches state updates
◆ React waits until all code in the event handlers has run before
processing your state updates.

11
Updating Objects in State

not recommended in React

12
Object spread syntax
◆ update only one field in a form,
◆ keep the previous values for all other fields.

◆ you can prepend an item by placing it before the original

13
Exercise 03
◆ Updating a nested object

14
Updating Arrays in State
◆ How to add, remove, or change items in an array in React state
◆ How to update an object inside of an array

15
Topics
1. React Router
2. React-Bootstrap
3. Tailwind CSS
4. JQuery
5. Redux
6. Angular

16

You might also like