Deep Dive into React
Components
Assignment Solutions
Assignment Solutions
Q1. Create a new React class component called UserProfile. This component should receive two props,
username (a string) and email (a string), and display them in a meaningful way within a JSX template.
Ans.
import React, { Component } from 'react';
class UserProfile extends Component {
render() {
const { username, email } = this.props;
return (
<div>
<h2>User Profile</h2>
<p>Username: {username}</p>
<p>Email: {email}</p>
</div>
);
export default UserProfile;
Q2. Create a class-based component called Counter with an initial state value of count set to 0. Display the
count value in the component. Implement two buttons, one to increment and one to decrement the count
value when clicked.
Ans.
import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
incrementCount = () => {
this.setState({ count: this.state.count + 1 });
decrementCount = () => {
this.setState({ count: this.state.count - 1 });
render() {
return (
<div>
<h2>Counter</h2>
<p>Count: {this.state.count}</p>
<button onClick={this.incrementCount}>Increment</button>
<button onClick={this.decrementCount}>Decrement</button>
</div>
);
export default Counter;
Assignment Solutions
Q3. Build a class-based component called ToggleButton. Initially, the component should display a button
with the text "OFF." When the button is clicked, it should toggle between "ON" and "OFF" each time it's clicked.
Ans.
import React, { Component } from 'react';
class ToggleButton extends Component {
constructor(props) {
super(props);
this.state = {
isOn: false,
};
toggleState = () => {
this.setState({ isOn: !this.state.isOn });
render() {
return (
<div>
<h2>ToggleButton</h2>
<button onClick={this.toggleState}>
{this.state.isOn ? 'ON' : 'OFF'}
</button>
</div>
);
export default ToggleButton;
Q4. Create a class-based component Todolist that manages a list of tasks. Implement an input field for
adding new tasks, a button to add a task to the list, and a list displaying all tasks. Use state to manage the list
of tasks and update it when a new task is added.
Ans.
import React, { Component } from 'react';
class Todolist extends Component {
constructor(props) {
super(props);
this.state = {
tasks: [],
newTask: '',
};
Full Stack Web Development
Assignment Solutions
handleInputChange = (event) => {
this.setState({ newTask: event.target.value });
addTask = () => {
const { tasks, newTask } = this.state;
if (newTask.trim() !== '') {
this.setState({
tasks: [...tasks, newTask],
newTask: '',
});
render() {
return (
<div>
<h2>Todo List</h2>
<input
type="text"
placeholder="Enter a new task"
value={this.state.newTask}
onChange={this.handleInputChange}
/>
<button onClick={this.addTask}>Add Task</button>
<ul>
{this.state.tasks.map((task, index) => (
<li key={index}>{task}</li>
))}
</ul>
</div>
);
export default Todolist;
Full Stack Web Development
Assignment Solutions
Q5. Develop a class-based component called LoginForm with input fields for "username" and "password."
Implement a form submission handler that logs the entered values to the console when the form is
submitted.
Ans.
import React, { Component } from 'react';
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
};
handleInputChange = (event) => {
const { name, value } = event.target;
this.setState({ [name]: value });
handleSubmit = (event) => {
event.preventDefault();
console.log('Username:', this.state.username);
console.log('Password:', this.state.password);
render() {
return (
<div>
<h2>Login Form</h2>
<form onSubmit={this.handleSubmit}>
<div>
<label>Username:</label>
<input
type="text"
name="username"
value={this.state.username}
onChange={this.handleInputChange}
/>
</div>
<div>
<label>Password:</label>
Full Stack Web Development
Assignment Solutions
<input
type="password"
name="password"
value={this.state.password}
onChange={this.handleInputChange}
/>
</div>
<button type="submit">Login</button>
</form>
</div>
);
export default LoginForm;
Full Stack Web Development
