Component Composition,

React Forms, Saas

[Link] kumar|DSBS|SRMIST
 Component Composition
• Component composition in React refers to the process of building
complex UIs by combining smaller, reusable components.

• Instead of creating a monolithic component, we break the UI into

independent parts that work together.

[Link] kumar|DSBS|SRMIST
……….
Advantage:
Reusability → Smaller components can be reused across the app.
Maintainability → Easier to update and manage the UI.
Readability → Code is cleaner and more structured.
Scalability → Helps in building large-scale applications efficiently.

[Link] kumar|DSBS|SRMIST
….
Example:
Here, we create a Header, Footer, and Content Class component and
combine them inside the App component.

• Header, Content, and Footer are small child components.

• App combines these components to form the full UI.
• Each component is independent, making the UI modular and
maintainable.

[Link] kumar|DSBS|SRMIST
Header, and Footer are small child components

[Link] kumar|DSBS|SRMIST
 Composing(Header,Foot
er,Content)

[Link] kumar|DSBS|SRMIST
[Link] kumar|DSBS|SRMIST
Passing Data (Props) in Class Components
• In React, props (short for "properties") allow data to be passed from a
parent component to a child component.
• This enables component reusability and dynamic rendering.

Charactereistics :

• props are accessed using [Link] in class components.

• props can be of any data type (string, number, object, function, etc.).
• Components should not modify props, as they are immutable.

[Link] kumar|DSBS|SRMIST
Passing Props in Class Components

[Link] kumar|DSBS|SRMIST
 Output

• UserProfile receives name and role as props from App.

• App passes different values to multiple UserProfile components.
• This makes the component dynamic and reusable.

[Link] kumar|DSBS|SRMIST
 Dynamic Composition
• Dynamic composition in React allows components to accept and render
different child elements dynamically using children or props.

• It enables reusability by letting a single component handle multiple

content types without modification.

[Link] kumar|DSBS|SRMIST
 Box is a component name that
we defined
children is a special prop in
React that allows the
component to accept
dynamic content.

The Box component is

reusable because it is
used multiple times
with different content.

Box dynamically accepts and

renders different child
elements (<p>, <button>,
etc.).

[Link] kumar|DSBS|SRMIST
 The Box component is flexible and reusable,
which is the core idea of dynamic composition.

[Link] kumar|DSBS|SRMIST
 Dynamic Composition with Conditional Rendering
Dynamic composition allows components to accept and render different
child elements (children) dynamically, making them reusable and
flexible.

Conditional rendering controls whether a component or part of it is

displayed based on props or state, optimizing UI behavior.

[Link] kumar|DSBS|SRMIST
 Added a show prop to Box that
controls visibility.

If show is true, the content inside Box

is displayed.

If show is false, Box returns null

(nothing is rendered).

The first and third <Box> are visible.

The second <Box>) is not rendered because

show={false}.

[Link] kumar|DSBS|SRMIST
 The first and third <Box> are visible

This is dynamic composition + conditional rendering!

[Link] kumar|DSBS|SRMIST
Dynamic composition with conditional
rendering, and state transition .
Dynamic composition allows components to render different child
elements based on context,

While conditional rendering selectively displays these elements, and

state transition enables dynamic changes, making the UI interactive
and responsive.

[Link] kumar|DSBS|SRMIST
 React's useState hook to create
a state variable

initializes a state variable

(isVisible )with the initial value
true.
setIsVisible → A function to
update the state

When you click the button, the

function inside onClick runs

!isVisible toggles the state:

If isVisible is true, !isVisible

becomes false (hides the card).

If isVisible is false, !isVisible

becomes true (shows the card).

[Link] kumar|DSBS|SRMIST
 This part dynamically changes the
button text based on
isVisible:

If isVisible = true → The button

text is "Hide Card".

If isVisible = false → The button

text is "Show Card".

[Link] kumar|DSBS|SRMIST
 Initial State (isVisible = true)
Button Text: "Hide Card“
Card is Visible

Click the Button (isVisible = false)

Button Text Updates to: "Show Card“

Card is Hidden (Not Rendered)

[Link] kumar|DSBS|SRMIST
Using useEffect for Logging State Changes in Dynamic
composition

useEffect is a React Hook that allows you to run code after the
component renders.

It is used for side effects, such as logging, API calls, animations, etc.

[Link] kumar|DSBS|SRMIST
 This part runs whenever isVisible
changes

If isVisible is true, it logs

Card is now visible

If isVisible is false, it logs:

Card is now hidden

[isVisible]

This dependency array means

the UseEffect runs only when
isVisible changes.

[Link] kumar|DSBS|SRMIST
When isVisible changes it logs the information
[Link] kumar|DSBS|SRMIST
onchange
• onChange is a predefined event handler in HTML & React.

• onChange is a built-in DOM event that triggers when an input field's

value changes.

• In React, it is used in controlled components to update the state

dynamically.

• A controlled component in React is an input element whose value is

controlled by React state.
[Link] kumar|DSBS|SRMIST
 text → Stores the current
value of the input field.

setText → Function to update

the text state.

useState("") → Initializes text

as an empty string ("").

[Link] kumar|DSBS|SRMIST
 e is the event object
It contains details about the event
that occurred.

[Link] refers to the element that

trigger the event

In this case, it's the <input> field

where the user types.

[Link] retrieves the

current text inside the input
field.
This value is passed to setText,
updating the React state.

[Link] kumar|DSBS|SRMIST
 <input> Field

type="text" → Creates a text

input.

value={text} →Updates text

state when the user types.

onChange={handleChange} →

Onchange listen to user input

When the user types it will
Calls handleChange function

[Link] kumar|DSBS|SRMIST
 When you type something in the input field that will be
reflected in the output dynamically

[Link] kumar|DSBS|SRMIST
preventDefault() is a function of event object (e)
In forms, it prevents page reload on submission.

In HTML, when a <form> is

submitted, the default behavior is
to refresh the page.

[Link](); stops this

behavior, allowing React to handle
the submission without
reloading.

If the user types "John" in an

input field, clicking "Submit"
will show the display in alert
box

[Link] kumar|DSBS|SRMIST
When we type some value
and press submit button

It shows the display in alert

box

[Link] kumar|DSBS|SRMIST
useRef for Uncontrolled Input
Access input value without using state.

useRef(null)
Creates a reference to store
input field data.

[Link]

Gets the text entered in

the input field.

ref={inputRef} Attaches
the useRef to the input
field

[Link] kumar|DSBS|SRMIST
 When we enter some value in input
field , it will be displayed in alert box
after pressing show value button.

useState triggers re-renders when the state updates, while useRef does not cause re-renders.
[Link] kumar|DSBS|SRMIST
React Forms
React Forms allow users to input and submit data while keeping input values
controlled using React state (useState).

Controlled Components input field's value is set by state (useState), not manually by
the browser.

When the user types, React updates the state, and the input field re-renders with
the new value.

Since React controls the data, it ensures predictable behavior and easy validation.

Event Handling with onChange updates state dynamically, and onSubmit processes
the form without refreshing the page.
[Link] kumar|DSBS|SRMIST
 (useState) →
Manages name,
email, and phone
values.

Spread operator🡪
(...formData) keeps
previous values
unchanged

[[Link]] →
Dynamically selects
the field being
updated (name, email,
or phone).
[Link] →
Gets the latest
input value and
updates the
selected field
[Link] kumar|DSBS|SRMIST
When you click Submit, the handleSubmit function runs and displays an alert
[Link] kumar|DSBS|SRMIST
 React with Saas
Sass (Syntactically Awesome Stylesheets) is a CSS preprocessor that
adds features like variables, nesting, mixins, and functions, making
styles more reusable and maintainable.

React supports Sass, allowing you to write cleaner and more structured
styles in .scss files and use them in your components.

[Link] kumar|DSBS|SRMIST
 Setting Up Sass in React
Install Sass in your React project

npm install sass

[Link] kumar|DSBS|SRMIST
After Installing Saas

[Link] kumar|DSBS|SRMIST
Create a Sass file ([Link])
[Link] [Link] [Link] This are some common naming choices for sass file creation

[Link] kumar|DSBS|SRMIST
Create a React Component ([Link])

[Link] kumar|DSBS|SRMIST
 $primary-color is a Sass
variable storing the color
#3498db (a shade of blue).

Instead of repeating the

same color in multiple
places, you use this
variable for consistency.

[Link] kumar|DSBS|SRMIST
 .container

This applies styles to any

element with
class="container“

text-align: center; → Centers

the text inside the container.

padding: 20px; → Adds space

inside the container.

Nesting (h1 & button inside

.container) → Keeps styles
structured.

[Link] kumar|DSBS|SRMIST
 &:hover (Hover Effect on
Button)

Sass Function (darken()) →

Dynamically adjusts colors.

& represents the parent

selector (button).

darken($primary-color,
10%) makes the button
darker when hovered
(reducing brightness by
10%).

[Link] kumar|DSBS|SRMIST
Hover the mouse on the button you can see
the darkness will be improved.

[Link] kumar|DSBS|SRMIST