Scribd
Upload
9 views29 pages

CS220 W5 Spring24

The document discusses arrow functions in JavaScript, highlighting their concise syntax and use in React components. It emphasizes the importance of refactoring functions for clarity and consistency, particularly when handling user interactions through event handlers in JSX. Additionally, it explains the difference between block bodies and concise bodies in arrow functions, and the role of React's synthetic events in managing user input.

Uploaded by

nn
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
9 views29 pages

CS220 W5 Spring24

The document discusses arrow functions in JavaScript, highlighting their concise syntax and use in React components. It emphasizes the importance of refactoring functions for clarity and consistency, particularly when handling user interactions through event handlers in JSX. Additionally, it explains the difference between block bodies and concise bodies in arrow functions, and the role of React's synthetic events in managing user input.

Uploaded by

nn
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/ 29

CSS 220: Week 5

Concepts Arrow function

Handler Function in JSX

1
Arrow function

2
JS Function

JavaScript has
multiple ways to
declare functions.
•Function statement
•Arrow function

3
Arrow Function
A new way to write a function

A feature of ES6.

With arrow functions, you can create functions without using the
function keyword.
You also sometimes do not have to use the return keyword.

4
Arrow function Arguments

We can remove the


parentheses in an arrow
function expression if it
has only one argument.
But, in multiple
arguments case, the
parentheses are required.

5
Refactoring function declarations
const App = () => {
return ( ... );
};
const Search = () => {
return ( ... );
};
const List = () => {
return ( ... );
};

6
Refactoring JS callback function

• not only function const List = () => {

components can be return (


<ul>
refactored
{list.map((item) => {
• But also, other functions return <li key={item.objectID}>...</li>;
like the callback function })}
used for the array’s map() </ul>
method );
};

7
Block body VS Concise body
If an arrow function’s only purpose is
to return a value and it doesn’t have
any business logic in between,
you can remove the block body
(curly braces) of the function.
In a concise body, an implicit return
statement is attached, so you can
remove the return statement

8
Refactoring to concise body
const App = () => (
<div>
...
</div>
);
const Search = () => (
<div>
...
</div>
);
const List = () => (
<ul>
{list.map((item) => (
<li key={item.objectID}>...</li>
))}
</ul>
);

9
Arrow functions

JSX has become more concise, omitting


function statements, curly braces, and return
statements.
However, it's important to note that this is an
optional step, and other syntax options are
acceptable.
10
Syntax Comparison

Function declarations over arrow function expressions


and block bodies over concise bodies with implicit
returns for arrow functions are valid options.

Block bodies are often necessary for introducing more


business logic between function signature and return
statement.

11
Refactoring concept

Understanding this refactoring concept is


crucial as we progress.

We'll transition between arrow function


components with and without block bodies
based on component requirements.
12
Function with block body
const App = () => {
// perform a task in between
return (
<div>
...
</div>
);
};

13
Wrap-up

Both function declarations and arrow


function expressions are acceptable for
component declarations.
Ensure that your team shares the same
implementation style to maintain consistency.

14
Wrap-up

Arrow function expressions with implicit return


statements offer concise syntax for component
declarations.

However, you may encounter tedious refactorings when


transitioning from concise to block body syntax for
performing tasks between function signature and return
statement.
15
Wrap-up

Consider using arrow function expressions


with block bodies for component declarations
to avoid potential refactoring challenges.
Consistency in syntax choice and
implementation style helps maintain code
readability and ease of maintenance.
16
Handler Function in JSX

17
Implementing User Interactions

In React applications, implementing user


interactions is a common requirement.

The Search component, which already


contains an input field element, is a good
starting point for adding user interactions.
18
Event Handling in Native HTML

In native HTML, event handlers are added


using the addEventListener() method on DOM
nodes.
This approach involves imperative
programming, where actions are explicitly
defined step by step.
19
Declarative Event Handling in React

In React, we'll explore how to add event handlers in JSX in


a declarative way.

We'll start by refactoring the Search component's function


from a concise body to a block body, allowing us to add
implementation details before the return statement.

20
Refactor Search Component to Block Body
const Search = () => {
// perform a task in between
return (
<div>
<label htmlFor="search">Search: </label>
<input id="search" type="text" />
</div>
);
};

21
Handler Function in JSX

Define a function – which can be a normal or arrow


function – for the change event of the input field.

In React, this function is called an (event) handler.

The function can be passed to the onChange attribute


(JSX named attribute) of the HTML input field.
22
Handler Function in JSX
const Search = () => {
const handleChange = (event) => {
// synthetic event
console.log(event);
// value of target (here: input HTML element)
console.log(event.target.value);
};
return (
<div>
<label htmlFor="search">Search: </label>
<input id="search" type="text" onChange={handleChange} />
</div>
);
};

23
Change Event

The change event is fired for <input>,


<select>, and <textarea> elements when the
user modifies the element's value.
Unlike the input event, the change event is
not necessarily fired for each alteration to an
element's value.
24
React Synthetic Event

Open the browser’s developer tools to see


logging occur after you type into the input field.
This is called a synthetic event defined by a
JavaScript object.
Through this object, we can access the emitted
value of the input field
25
React Synthetic Event

React’s synthetic event is essentially a wrapper


around the browser’s native event

It has more functions that are useful to prevent


native browser behavior (e.g., refreshing a page
after the user clicks a form’s submit button).
26
Handler Function in JSX
Always pass functions to these
handlers, not the return value
of the function, except when
the return value is a function.

Knowing this is crucial because


it’s a well-known source for
bugs in a React beginners'
application.

27
Handling User Interactions

Functions can be passed to HTML element


attributes for handling user interactions.

<input onChange={handleChange} />


assigns the handleChange function to the
onChange event of the <input> element.
28
Conclusion

Mixing HTML and JavaScript in JSX is a


fundamental aspect of developing React
applications.
JSX allows for dynamic content rendering and
efficient handling of user interactions, making
it an essential tool in React development.
29

You might also like