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;

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

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

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

<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