Scribd
Upload
37 views11 pages

FSD Seminar (State & Props)

Uploaded by

Veenadhari Ananthula
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
37 views11 pages

FSD Seminar (State & Props)

Uploaded by

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

State & Props

In React
B.Jyothirmayee
22R01A6713
REACT: A JS library Used For
building Single Page User
Applications.

● Component

● State

● Props
STATE:
A state Is a built- In Object In React , Used For Storing Data or
property Details about the Component. The State can change
over time, each time the component re-renders. The component’s
behaviour always depends on the changes of this state, which
may occur by user input actions or system events.

Key Characteristics Of State:


● MUTABLE - state's data can be changable depending upon the user
actions.

● LOCAL TO THE COMPONENT - State Is Always Accessed and


Managed Only Within The component but not from outside of the
component.

● TRIGGERS RE-RENDERING - change in the value of the state


Triggers Re-rendering of the Component.
Changing Of The State:
A State can be modified in a component using
these methods:
● SetState - in class component

● Use State - in Functional Component


USES OF STATE:

● DYNAMIC DATA HANDLING


(frequently changing in the data is handle by this state)
● MANAGING COMPONENT STATE
(state keeps tracks of the internal state and functions of the
Component)
● DATA FETCHING
(State's Holds The Fetched data and manages Errors and
Loading)
PROPS (Properties):
In React, Props Are the Read-Only - Attributes, Fundamentally Used
To Pass Data Accross Components. That Is From , Parent Component
To Child Component.

The Unique React Keyword “PROP” is Used To Determine This Data


Transmission.
Key Characteristics Of Props:

● UNI-DIRECTIONAL DATA FLOW :- Data Flows From parent


component to child component in a single direction only.

● IMMUTABLE :- data cannot be modified once passed. Child


component cannot make any changes in the parent component.

● DEFAULT VALUE :- if any value is not initialised to the


Property in parent component, it's assigns a default value and
the same will be passed to the child component.
Process Of Props:
● SENDING / PASSING PROPS -> In the component of the JS
code , by using PROP attribute. (Parent component)
● RECEIVING PROPS -> in child component we again access
the passed prop using PROP object only.
● USING PROPS -> once received, props can be used within
component similar to JS variable, to customise component's
behaviour or content.

Uses Of Props In JS:

● DATA PASSING - mainly used for data passing between


components such as input values, API responses.
● CONSISTENT DATA FLOW
● CODE REUSABLILITY - props can provide customizability in
different use cases while keeping the core logic reusable.
EXAMPLE:

HelloWorld.js

import React, { useState } from 'react';


function HelloWorld({ initialMessage }) {
// Using useState hook to define a state variable 'message'
const [message] = useState(initialMessage || 'Hello, World!');
return (
<div>
{/* Rendering the value of 'message' received as prop or default
*/}
<h1>{message}</h1>
</div> HelloWorld -
); COMPONENT
} Initial message - PROP
export default HelloWorld; Message - STATE
App.js

import React from 'react';


import HelloWorld from './HelloWorld';
function App() {
return (
<div>
{/* Rendering the HelloWorld component with and without
initial message */}
<HelloWorld /> {/* Displays 'Hello, World!' */}
<HelloWorld initialMessage="Hey there!" /> {/* Displays
'Hey there!' */}
</div>
App - COMPONENT
);
InitialMessage -
}
PROP
export default App;
Hey There! - VALUE
OUTPUT:

Hello,World!

Hey,there!
SUMMARY:

Difference Between State And Props:

STATE : PROPS:

● MUTABLE ● IMMUTABLE
● Local To The Component ● Data passing through various
● State is both read and write Components
● Just Holds Info ● Props are Read-Only
● State can't make component as ● Passes info
reusable ● Props makes components reusable
THANK YOU!

You might also like