Scribd
Upload
5 views

react2

Uploaded by

huzaifa ali
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

react2

Uploaded by

huzaifa ali
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

State

Management
and Events
IRFAN JAVED
M HUZAIFA ALI
TABLE OF CONTENTS

01 03
What is Events
State?

02 04
Handling The Using Events with
State Forms
01
What is State?
React State

A state is an object that holds data and


information related to a React
component. It can be used to store,
manage, and update data within the
application, which in turn allows for
dynamic changes to user interfaces. For
example, if a button needs to change
its text based on user input, then this
would be done by updating the state
with new values.
02
Handling the State
useState Hook
The React useState Hook allows us to track state in a function
component. State Generally refers to data or properties that need
to be tracking in an application.
Import useState:

Initialize useState:

The First Value “color” is the current State, The Second “setColor” is the
setter function.
Updating the State:
What Can The State Hold?
The useState Hook can be used to track of strings, numbers,
Boolean, arrays, objects or any combination of these.
A single Hook that Holds and object.
Updating Objects in State
03
Events
Events
Just like HTML DOM events, React can perform actions based on user
events.
React has the same events as HTML: click, change, mouseover etc.
Passing Arguments Into Events
04
Using Events With Forms
Adding Forms in React
Handling Forms
Submitting Forms
Multiple Input Fields
THANKS!

CREDITS: This presentation template was


created by Slidesgo, incluiding icons by
Flaticon, and infographics & images by
Freepik.

You might also like