💻Lecture Notes Of Class 14
Component Communication in React
Objective:
Understand
how to pass data and functions between React components, focusing on
communication:
- Parent to Child
- Child to Parent
Introduction
In
React, applications are made up of components. Components often need to
communicate with each other to share data or trigger actions.
Component
communication
is the process of passing data and functions between components. This is
crucial to build dynamic and interactive web applications.
Why Component Communication?
- React components are reusable
and independent.
- Components often need to share
data to keep the UI synchronized.
- Communication ensures
components update their state and reflect changes properly.
Types of Component Communication
1.
Parent
to Child Communication
2.
Child
to Parent Communication
1. Parent to Child Communication
Concept:
- The parent component
sends data or functions to the child component using props.
- Props are like function
arguments but for components.
- Child components receive data
from the parent via props.
Example:
// ParentComponent.jsx
function ParentComponent() {
const message = "Hello from Parent!";
return <ChildComponent greeting={message} />;
}
// ChildComponent.jsx
function ChildComponent(props) {
return <h1>{props.greeting}</h1>;
}
Explanation:
- ParentComponent passes the
string "Hello from Parent!" as a prop named greeting.
- ChildComponent receives greeting
in its props and displays it.
2. Child to Parent Communication
Concept:
- The child component cannot
directly change the parent's state.
- Instead, the parent passes a function
as a prop to the child.
- The child calls this function
to send data or trigger state changes in the parent.
Example:
import React, { useState } from "react";
function ParentComponent() {
const [message, setMessage] = useState("");
const handleMessageChange = (newMessage) => {
setMessage(newMessage);
};
return (
<div>
<ChildComponent onMessageChange={handleMessageChange} />
<p>Message from Child: {message}</p>
</div>
);
}
function ChildComponent(props) {
const sendMessage = () => {
props.onMessageChange("Hello from Child!");
};
return <button onClick={sendMessage}>Send Message to Parent</button>;
}
Explanation:
- The parent maintains a state message.
- It passes the function handleMessageChange
to the child as a prop named onMessageChange.
- The child calls this function
when the button is clicked.
- This updates the parent’s state
and displays the new message.
Activity: Create a Parent Component
That Updates State From Child Input
Goal:
Build
two components: Parent and Child.
- The Child component has
an input box.
- When you type in the input box,
it sends the input value to the Parent component.
- The Parent component
updates its state and displays the current input value.
Step-by-step:
1.
ParentComponent.jsx
import React, { useState } from "react";
import ChildComponent from "./ChildComponent";
function ParentComponent() {
const [inputValue, setInputValue] = useState("");
const handleInputChange = (value) => {
setInputValue(value);
};
return (
<div>
<h2>Input from Child: {inputValue}</h2>
<ChildComponent onInputChange={handleInputChange} />
</div>
);
}
export default ParentComponent;
2.
ChildComponent.jsx
function ChildComponent(props) {
const handleChange = (event) => {
props.onInputChange(event.target.value);
};
return <input type="text" onChange={handleChange} placeholder="Type
here..." />;
}
export default ChildComponent;
How it works:
- The child component triggers onInputChange
on every keystroke.
- The parent updates its state
and displays the typed text live.
Homework
Task: Create a simple Feedback App
Requirements:
- A Parent component that
shows feedback messages.
- A Child component with
an input box to enter feedback.
- When the user types feedback in
the child input and submits, the feedback is sent to the parent.
- The parent displays the
submitted feedback.
Bonus:
Add multiple feedback entries stored in an array and display them all.
Summary
|
Concept |
Explanation |
|
Parent to Child Communication |
Pass data/functions down via props |
|
Child to Parent Communication |
Pass a callback function from parent to child to update
parent state |
Q&A
- Q: Can child components directly
modify parent state?
A: No, child components can only request parent to update state via callback functions. - Q: What happens if a prop changes
in the parent?
A: The child component re-renders with new prop values.
