📄Assignments Of Class 14
Component Communication in React
Assignment 1: Pass a Message from
Parent to Child
Problem:
Create two components: Parent and Child. Pass a message string from the parent
to the child and display it inside the child component.
Solution:
// Parent.jsx
function Parent() {
const message = "Hello from Parent!";
return <Child msg={message} />;
}
// Child.jsx
function Child(props) {
return <h1>{props.msg}</h1>;
}
Assignment 2: Pass Multiple Props
from Parent to Child
Problem:
Modify Assignment 1 to pass the parent’s name and age as separate props and
display them in the child.
Solution:
// Parent.jsx
function Parent() {
const name = "Alice";
const age = 30;
return <Child name={name} age={age} />;
}
// Child.jsx
function Child(props) {
return (
<div>
<p>Name: {props.name}</p>
<p>Age: {props.age}</p>
</div>
);
}
Assignment 3: Child Sends Data to Parent
on Button Click
Problem:
Create Parent and Child components. The child has a button. When clicked, the
child sends a message to the parent, which is displayed in the parent.
Solution:
import React, { useState } from "react";
function Parent() {
const [msg, setMsg] = useState("");
const receiveMessage = (message) => {
setMsg(message);
};
return (
<div>
<Child sendMessage={receiveMessage} />
<p>Message from Child: {msg}</p>
</div>
);
}
function Child(props) {
const handleClick = () => {
props.sendMessage("Hello Parent, from Child!");
};
return <button onClick={handleClick}>Send Message</button>;
}
Assignment 4: Live Input from Child
to Parent
Problem:
Child has an input box. As the user types, send the input value live to the
parent and display it there.
Solution:
import React, { useState } from "react";
function Parent() {
const [inputValue, setInputValue] = useState("");
const handleInput = (value) => {
setInputValue(value);
};
return (
<div>
<h2>Input from Child: {inputValue}</h2>
<Child onInputChange={handleInput} />
</div>
);
}
function Child(props) {
return (
<input
type="text"
placeholder="Type here"
onChange={(e) => props.onInputChange(e.target.value)}
/>
);
}
Assignment 5: Pass Function from
Parent to Child to Update Parent State
Problem:
Create a parent component with a counter. Pass a function to the child to
increment the counter. The child has a button to increment.
Solution:
import React, { useState } from "react";
function Parent() {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<h2>Count: {count}</h2>
<Child onIncrement={incrementCount} />
</div>
);
}
function Child(props) {
return <button onClick={props.onIncrement}>Increment Count</button>;
}
Assignment 6: Parent Sends List to
Child and Child Displays It
Problem:
Parent has an array of fruits. Pass this list as a prop to the child. Child
displays the list in an unordered list.
Solution:
// Parent.jsx
function Parent() {
const fruits = ["Apple", "Banana", "Orange",
"Mango"];
return <Child fruits={fruits} />;
}
// Child.jsx
function Child(props) {
return (
<ul>
{props.fruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
);
}
Assignment 7: Child Updates Parent’s
List by Adding an Item
Problem:
Parent maintains a list of tasks. Pass a function to the child to add a new
task. Child has an input box and a button to submit a new task.
Solution:
import React, { useState } from "react";
function Parent() {
const [tasks, setTasks] = useState(["Task 1", "Task
2"]);
const addTask = (task) => {
setTasks([...tasks, task]);
};
return (
<div>
<Child onAddTask={addTask} />
<ul>
{tasks.map((task, i) => (
<li key={i}>{task}</li>
))}
</ul>
</div>
);
}
function Child(props) {
const [input, setInput] = useState("");
const handleSubmit = () => {
if (input.trim()) {
props.onAddTask(input);
setInput("");
}
};
return (
<div>
<input
type="text"
value={input}
onChange={(e) =>
setInput(e.target.value)}
placeholder="New task"
/>
<button onClick={handleSubmit}>Add Task</button>
</div>
);
}
Assignment 8: Two-Way Communication
Example
Problem:
Create a parent with a number state. Pass the number and a function to the
child. The child displays the number and has buttons to increment or decrement
by calling the parent function.
Solution:
import React, { useState } from "react";
function Parent() {
const
[number, setNumber] = useState(0);
const updateNumber = (value) => {
setNumber(number + value);
};
return (
<div>
<Child number={number} onUpdate={updateNumber} />
<p>Current Number in Parent: {number}</p>
</div>
);
}
function Child(props) {
return (
<div>
<h3>Number: {props.number}</h3>
<button onClick={() => props.onUpdate(1)}>Increment</button>
<button onClick={() => props.onUpdate(-1)}>Decrement</button>
</div>
);
}
Assignment 9: Parent Passing Styles
to Child via Props
Problem:
Parent passes CSS styles as props to child. Child applies these styles to a
div.
Solution:
// Parent.jsx
function Parent() {
const boxStyle = {
width: "200px",
height: "100px",
backgroundColor: "lightblue",
border: "2px solid blue",
};
return <Child style={boxStyle} />;
}
// Child.jsx
function Child(props) {
return <div style={props.style}>Styled Box</div>;
}
Assignment 10: Feedback App
(Homework from Lecture)
Problem:
Create a simple feedback app:
- Parent component holds an array
of feedback messages.
- Child component has a form with
a text input and submit button.
- On submit, child sends feedback
to parent, which adds it to the list and displays all feedbacks.
Solution:
import React, { useState } from "react";
function Parent() {
const [feedbackList, setFeedbackList] = useState([]);
const addFeedback = (feedback) => {
setFeedbackList([...feedbackList, feedback]);
};
return (
<div>
<h2>Feedbacks</h2>
<Child onSubmitFeedback={addFeedback} />
<ul>
{feedbackList.map((fb, i) => (
<li key={i}>{fb}</li>
))}
</ul>
</div>
);
}
function Child(props) {
const [feedback, setFeedback] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
if (feedback.trim()) {
props.onSubmitFeedback(feedback);
setFeedback("");
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={feedback}
onChange={(e) =>
setFeedback(e.target.value)}
placeholder="Enter feedback"
/>
<button type="submit">Submit Feedback</button>
</form>
);
}
Summary
|
Assignment |
Focus Area |
|
1 |
Simple parent to child data passing |
|
2 |
Multiple props from parent to child |
|
3 |
Child sending message to parent |
|
4 |
Live input from child to parent |
|
5 |
Function passed from parent to child to update state |
|
6 |
Parent passing list to child |
|
7 |
Child updating parent list |
|
8 |
Two-way communication (increment/decrement) |
|
9 |
Passing styles as props |
|
10 |
Full feedback app with form submission and list display |
