CS220: Week 6

Concepts React Props

React State

TBS - CS220 1
React Props

TBS - CS220 2
React Props
The list variable as a global variable in the current application.

Used directly from the global scope in the App component, and
later in the List component.
This could work if you only had one global variable, but it isn’t
maintainable with multiple variables across multiple components.
Props in React: pass variables as information from one component
to another component
TBS - CS220 3
React Props

Moving the list

from the global
scope into the App
component and
renaming it to its
actual domain
TBS - CS220 4
React Props
• Using React props to pass the list
of items to the List component.
• The variable is called stories
in the App component, and we
pass it under this name to the
List component.
• In the List component’s
instantiation, it is assigned to the
list HTML attribute:

TBS - CS220 5
React Props

After passing it to the

List component, we
can access it as list
property from the
props object in the List
component’s function
signature:
TBS - CS220 6
React Props

Passing information from a parent component to a

child component via a component element’s HTML
attribute can be accessed in the child component.

The child component receives an object parameter

(props) which includes all the passed attributes as
properties (props).

TBS - CS220 7
React Props

Passing information from one component down to another

with React props

Prevents the list variable from polluting the global scope in

our src/App.js file when defined it outside of the component

TBS - CS220 8
React Props

The list is defined as stories in the App

component.

stories is not used in the App component

directly, but in one of its child components. It
is passed it as props to the List component.
TBS - CS220 9
Alternative

Defining stories directly in the List component

 no need to use props in the first place.

In the future the stories will be used in the

App component.

TBS - CS220 10
React Props
• Another use case for React props is
the List component and its
potential child component.
• Couldn’t extract an Item
component from the List
component
• How to pass each item to the
extracted Item component?
• Perform the component extraction
and pass each item along to the
List component’s new child
component.

TBS - CS220 11
React Props

Props are used to pass information down the

component tree.

Information (props) can only be passed from

a parent to a child component and not vice
versa.
TBS - CS220 12
React State

TBS - CS220 13
React State

React state is used to make

applications interactive
State is used to alter
information over time
TBS - CS220 14
Introduction

React Props • Immutable Data Passing

• Transmit data from parent to child

Purpose components

Immutable • Cannot be mutated by developers

TBS - CS220 15
React State: Managing Mutable Data

Definition • Mutable data structure for stateful values

Instantiation • Created within React components

Interaction • Can be passed as props to child components

Mutability • Allows modification using functions

TBS - CS220 16
Mutating React State

Process • Use functions to modify state values

• Triggers re-rendering of the

Impact component and child components

• Enables dynamic updates and user

Flexibility interactions

TBS - CS220 17
React State

The user may want to

Whenever a user types see this typed
something into an HTML information (state)
input field displayed somewhere
else in the application.

TBS - CS220 18
React State
• How to change information
over time?
• How to notify React to re-
render its component(s)
again?
• A naive (but wrong) approach
would be the following
• In the browser : the output
does not appear below the
HTML input field after typing
into it
TBS - CS220 19
React State

Missing: The mechanisms to notify React to re-

render the component with the new searchTerm
state after the event handler updated it.

Telling React that searchTerm is a state that

changes over time and that whenever it changes
React has to re-render its affected component(s).
TBS - CS220 20
React State

React offers us a utility

function called useState
React’s useState function takes
an initial state as an argument
(empty string).
Providing this initial state to
useState  Telling React that
this state will change over time.
TBS - CS220 21
React State

Calling this function will return an array with

two entries:
•The first entry (searchTerm) represents the
current state
•The second entry is a function to update this
state (setSearchTerm): state updater function
TBS - CS220 22
React useState

TBS - CS220 23
React State
When the user types into the input field, the input field’s change event is captured
by the event handler.

The handler’s logic uses the event’s value and the state updater function to set
the updated state.

After the updated state is set in a component, the component renders again (the
component function runs again).

The updated state becomes the current state and is displayed in the component’s
JSX.

TBS - CS220 24
React State

TBS - CS220 25
React State (Exercice)
• Put a console.log() into each of your components.
• For example
• The App component: console.log('App renders’)
• The List component: console.log('List renders’)
• ...
• Now check your browser:
• For the first rendering, all loggings should appear
• Once you type into the HTML input field, only the Search component’s
logging should appear.
• React only re-renders this component (and all of its child components),
because its state changed.

TBS - CS220 26
Rendering and Re-rendering in React

Initial Rendering Re-rendering

•First display of a Process
React component in • Subsequent renderings
the browser after the initial rendering
•When a component • Triggered by state
is first mounted changes or prop updates
TBS - CS220 27
State Changes and Re-rendering

Effect: State changes result in re-

rendering of affected components
Example: User interactions
updating component state
TBS - CS220 28
Prop Updates and Re-rendering

Prop Changes: Updates in props

can also trigger re-rendering
Use Cases: Passing data from
parent to child components
TBS - CS220 29
Component Hierarchy and Re-rendering

Scope: Re-rendering affects the component

and its descendant components

Cascading Effect: Changes propagate down

the component tree

TBS - CS220 30
React State

useState function is called a

React hook.
React provides many hooks
(more in next sections)
TBS - CS220 31
Initial State Initialization

Description: useState hook initializes

with an initial state during UI rendering

Function: Returns the initial state as

the current state
TBS - CS220 32
Re-rendering and State Updates

Process: Re-rendering due to state changes

triggers useState to use the latest state

Internal Closure: useState maintains state

within its closure for each component

TBS - CS220 33
Callback Handlers in JSX

TBS - CS220 34
Props / State
props are passed down as information from parent to child
components

state can be used to change information over time and to make

React show this changed information.

The Search component does not share its state with other
components: it’s only used and updated by the Search component

TBS - CS220 35
There is no way to
pass information
up the component
tree
props are naturally
only passed
downwards.

TBS - CS220 36
callback handler

A callback function

• gets introduced (A)

• is used elsewhere (B)
• “calls back” to the
place it was introduced
(C)
TBS - CS220 37
callback handler
Search component
can use this
callback handler
from its incoming
props to call it
whenever a user
types into the
HTML input field
TBS - CS220 38
callback handler concept

call this function in the child

pass a function from a component (Search), but
parent component (App) to have the actual
a child component (Search) implementation of the
via props called function in the parent
component (App).

TBS - CS220 39
callback handler concept
When an (event) handler is passed as props from a parent
component to its child component, it becomes a callback handler.

React props are always passed down the component tree

callback handlers passed as functions in props can be used to

communicate up the component hierarchy.

TBS - CS220 40
Lifting State in React

TBS - CS220 41
Lifting State in React

•Use the searchTerm from the

Search component to filter
Task the stories by title in the App
component before they
reach the List component.

TBS - CS220 42
Lifting State in React

callback handler pass information from the Search

component up to the App component.

The incoming value is only accessible in the callback

handler’s function.

How to share the Search component’s state across

multiple components (App, List) who are interested in it?

TBS - CS220 43
lift state up from
Search to App
component to
share the state with
more components

TBS - CS220 44
Lifting State in React
The Search component doesn’t manage the state anymore

only passes up the event to the App component via a callback

handler after the text is entered into the HTML input field.
You could also display the searchTerm again in the App
component (from state, when using searchTerm directly)
or Search component (from props, when passing the searchTerm
state down as props).
TBS - CS220 45
Rule
Always manage state at a component level where every component that’s interested in it is
one that either manages the state (using information directly from state, e.g. App
component) or a component below the managing component (using information from
props, e.g. List or Search).
If a component below needs to update the state (e.g. Search), pass a callback handler
down to it which allows it to update it.

If a component needs to use the state (e.g. displaying it), pass it down as props.

TBS - CS220 46
Lifting State in React
• Managing the search feature’s state in the App component
•  we can filter the stories with the stateful searchTerm before
passing them as list to the List component:

TBS - CS220 47
TBS - CS220 48
Lifting State in React
• The filter function checks whether the searchTerm is present in our
story item’s title, but it’s still too opinionated about the letter case.
• To fix this problem, we have to lower case the story’s title and the
searchTerm to make them equal

TBS - CS220 49