Scribd
Upload
7 views11 pages

Fet P20

The document outlines a practical assignment for a B. Tech Computer Science and Engineering student, focusing on implementing React state, event, props management, and CRUD operations. It explains the concepts of props and state in React, detailing their characteristics and usage. The practical also includes code snippets demonstrating the implementation of props and state in React components.

Uploaded by

Purva Patel
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
7 views11 pages

Fet P20

The document outlines a practical assignment for a B. Tech Computer Science and Engineering student, focusing on implementing React state, event, props management, and CRUD operations. It explains the concepts of props and state in React, detailing their characteristics and usage. The practical also includes code snippets demonstrating the implementation of props and state in React components.

Uploaded by

Purva Patel
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/ 11

Institute of Computer Technology

B. Tech Computer Science and Engineering


Sub: (2CSE410) FRONT END TECHNOLOGIES

Name:- Purva Patel


Batch:-41(BDA) Enroll.no:-
23162121017

Practical - 20
AIM: To implement the React state, event, props management and CRUD
operations

Tools Used: Code editor (VS Code) and web browser (Google Chrome).

Theory:

Props are read-only attributes used to pass data from one component to another, usually from a
parent to a child component. They allow components to be reusable and configurable.

State is a built-in object that allows a component to create and manage its own local, dynamic data. It
determines how a component behaves and renders based on user interaction, system events, or API
responses.

Props State
Short for Properties, props are read-only inputs State is a local data storage that is passed
from parent to child components. managed within a component.

Used to pass data from parent to child. Used to manage dynamic data within
Feature Code:- ❌ No

Data Ownership Props State

Owned by parent Owned by the component itself


Mutability component

Immutable – cannot be Mutable – can be changed using


Usage setState() or useState()
changed by the child

Used to track and update UI


Used to pass data into
Access changes this.state / useState()
components

Behavior and interactivity


Purpose this.props (in class) / props
(in functional)

Configuration of a ✅ Yes
Can it be changed by the
component
component itself?
the component.
Event.js

import React, { useState } from 'react';

export default function States() {


const [name, setName] = useState('zoyal');
const [age, setAge] = useState(19);
States.js
import React from 'react'
export default function Props(props) {
return (
<div>
<h1>This below is props.js</h1>
Yes
<p>Hello, below is the data i have gained from my parent, which is said
to be my props</p>
<p>My name is: {props.name}</p>
Props.js

<p>My age is: {props.age}</p>


<p>My level is: {props.level}</p>
</div>
)
}
Output:-

Objective Achieved: Through this practical, the props, state, and events are managed

You might also like