📄Assignments Of Class 20
Revision and Viva / Final
Demo
Assignment 1: Create a BlogItem
Component Using Props
Task:Create a BlogItem component that accepts title and author as props and displays
them.
Solution:
function BlogItem(props) {
return (
<div>
<h2>{props.title}</h2>
<p>By: {props.author}</p>
</div>
);
}
function App() {
return (
<div>
<BlogItem title="My First Blog" author="John Doe"
/>
<BlogItem title="React Basics" author="Jane
Smith" />
</div>
);
}
Assignment 2: Manage State for a
Counter
Task:Create a button that increments a counter displayed on the page using useState.
Solution:
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
function increment() {
setCount(count + 1);
}
<div>
<h1>Count: {count}</h1>
<button onClick={increment}>Increment</button>
</div>
);
}
export default Counter;
Assignment 3: useEffect to Update
Document Title
Task:Use useEffect to update the browser’s document title to "Count: X"
whenever the counter changes.
Solution:
import React, { useState, useEffect } from "react";
function CounterWithEffect() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);
return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default CounterWithEffect;
Assignment 4: Setup Basic Routing
Task:Create two routes: Home (/) and About (/about) using React Router.
Solution:
import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
function Home() {
return <h2>Home Page</h2>;
}
function About() {
return <h2>About Page</h2>;
}
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link>
| <Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home
/>} />
<Route path="/about" element={<About
/>} />
</Routes>
</BrowserRouter>
);
}
export default App;
Assignment 5: Dynamic Routing with
useParams
Task:
Create a route /blog/:id and display the blog ID on the page using useParams.
Solution:
import React from "react";
import { BrowserRouter, Routes, Route, useParams } from "react-router-dom";
function BlogDetail() {
const { id } = useParams();
return <h2>Blog ID: {id}</h2>;
}
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/blog/:id" element={<BlogDetail
/>} />
</Routes>
</BrowserRouter>
);
}
export default App;
Assignment 6: Controlled Form Input
Task:Create a form with a text input for the blog title. Display the typed value
below the input in real-time.
Solution:
import React, { useState } from "react";
function BlogForm() {
const [title, setTitle] = useState("");
function handleChange(e) {
setTitle(e.target.value);
}
return (
<div>
<form>
<label>Blog Title:</label>
<input type="text" value={title}
onChange={handleChange} />
</form>
<p>Current Title: {title}</p>
</div>
);
}
export default BlogForm;
Assignment 7: Form Submission
Handling
Task:Create a form with blog title and body inputs. On submit, prevent default
behavior and log the input values.
Solution:
import React, { useState } from "react";
function BlogForm() {
const [title, setTitle] = useState("");
const [body, setBody] = useState("");
function handleSubmit(e) {
e.preventDefault();
console.log("Title:", title);
console.log("Body:", body);
// Reset inputs
setTitle("");
setBody("");
}
return (
<form onSubmit={handleSubmit}>
<label>Title:</label>
<input type="text" value={title} onChange={e =>
setTitle(e.target.value)} required />
<br />
<label>Body:</label>
<textarea value={body} onChange={e => setBody(e.target.value)}
required />
<br />
<button type="submit">Add Blog</button>
</form>
);
}
export default BlogForm;
Assignment 8: Display Blog List
Using Props and map()
Task:Pass an array of blogs as props to a component and display the title of each
blog.
Solution:
function BlogList({ blogs }) {
return (
<div>
{blogs.map(blog => (
<h3 key={blog.id}>{blog.title}</h3>
))}
</div>
);
}
function App() {
const blogs = [
{ id: 1, title: "React Basics" },
{ id: 2, title: "Learning useState" },
{ id: 3, title: "Understanding Routing" },
];
return <BlogList blogs={blogs} />;
}
Assignment 9: Use useEffect to Fetch
Data (Simulated)
Task:Use useEffect to simulate fetching blog posts from an API and display them.
Solution:
import React, { useState, useEffect } from "react";
function BlogList() {
const [blogs, setBlogs] = useState([]);
useEffect(() => {
// Simulate fetch with timeout
setTimeout(() => {
setBlogs([
{ id: 1, title: "Fetched Blog
1" },
{ id: 2, title: "Fetched Blog
2" },
]);
}, 2000);
}, []);
return (
<div>
<h2>Blogs:</h2>
{blogs.length === 0 ? (
<p>Loading...</p>
) : (
blogs.map(blog => <p key={blog.id}>{blog.title}</p>)
)}
</div>
);
}
export default BlogList;
Assignment 10: Combine Routing and
Form Submission
Task:Create a blog app with two pages: / to display blogs and /add with a form to
add new blogs. On form submit, add the blog to the list and redirect to /.
Solution:
import React, { useState } from "react";
import { BrowserRouter, Routes, Route, Link, useNavigate } from "react-router-dom";
function Home({ blogs }) {
return (
<div>
<h2>Blogs</h2>
{blogs.length === 0 ? <p>No blogs yet.</p> : blogs.map(b
=> <p key={b.id}>{b.title}</p>)}
<Link to="/add">Add Blog</Link>
</div>
);
}
function AddBlog({ addBlog }) {
const [title, setTitle] = useState("");
const navigate = useNavigate();
function handleSubmit(e) {
e.preventDefault();
addBlog({ id: Date.now(), title });
navigate("/");
}
return (
<form onSubmit={handleSubmit}>
<input value={title} onChange={e => setTitle(e.target.value)}
required placeholder="Blog title" />
<button type="submit">Add Blog</button>
</form>
);
}
function App() {
const [blogs, setBlogs] = useState([]);
function addBlog(blog) {
setBlogs(prev => [...prev, blog]);
}
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home
blogs={blogs} />} />
<Route path="/add" element={<AddBlog
addBlog={addBlog} />} />
</Routes>
</BrowserRouter>
);
}
export default App;
