Scribd
Upload
34 views12 pages

State and Props

Uploaded by

gagangk8822
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
34 views12 pages

State and Props

Uploaded by

gagangk8822
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/ 12

State :

✓ State is used to store data at component level.


✓ In class based component there is a property called as state so class
based component is called as Statefull component.
✓ In function based component there is no built in property called as
state so it is called as StateLess Component.
✓ We can make Function based component as statefull by using a
hook called as useState()

Hooks :
✓ Hook is nothing but a function and present only in function based
component.
✓ Hooks are introduced React 16.8 version onwards.
✓ Why Hooks are used in ReactJS?
➢ Hooks allows functional component to have access to state and
other React features which present in Class based components.
Basic hooks :
1) useState ( )
2) useEffect ( )
3) useContext ()

useState( ) :
• This hook allows you to add state to FBC.
• It return an array let [ ] = useState( )
• It accepts 2 values
a. current state b. Updator function.
• Initialization of useState( )

State variable updator function initial value


Note : While using useState( ) first we need to import that from React library.
Example:
App.jsx

main.jsx

Example : Simple Conter


App.jsx

main.jsx

PROPS :
✓ Props are shorthand for properties.
✓ Props is an object.
✓ Props is a way to communicate between the component.
✓ Props are used to send the data present in one component into another
component.
✓ Props are sent html like attribute format.
Example : Sending data present in App.jsx into Child.jsx. Here App.jsx acts as
a parent and Child.jsx acts as child.
Ex:1
App.jsx :

Child.jsx

Props Children :
App.jsx :
Child.jsx

Destructuring while receiving props


Ex:1
App.jsx

Child.jsx
Destructuring while receiving props children
App.jsx

Child.jsx

Direct destructuring while receiving props


App.jsx
Child.jsx

Ex : direct destructuring while receiving props children


App.jsx

Child.jsx
Default Props :
✓ Suppose if we are not actually sending the data but we want something to print in
Child Component then we should go for default props.
✓ Default props works only when we don’t send data.
✓ If we send the data along with default props, the sending data will override the default
props.
Ex:1
App.jsx

Child.jsx

In this example in UI Ajay is displayed.


Ex 2:
App.jsx

Child.jsx

In this example in UI Yash is displayed.

PropTypes:
✓ They are used to specify the expected data types of properties (props) that a
component should receive.

Steps:
➢ Install PropTypes using command npm i prop-types
➢ After installing import it in the component where you are receiving the props.
App.jsx
Child.jsx

Here in App.jsx we are sending age = “30” as a string but expected datatype of age is integer
so we will get warning in console along with output

Note: props are immutable


App.jsx
Child.jsx

➢ In the above example we are trying to change the props value.


➢ In App.jsx we are sending name=”yash” but in Child.jsx after receiving the props we
are trying to change the value to vijay in this case we will get error

(Important interview question)


Difference Between state and props
States Props
State is used to store data at component Props are used to communicate between the
level component, it is a data sent from one
component to another componet
State are mutable means state value can be Props are immutable means props values
changed cannot be changed

You might also like