Question Paper

Technology: ReactJS # of Questions: 10 Pattern: Descriptive

Topic: Props and State Start Date: Edited Date:

1.Create a React component that displays a counter. The counter should start at 0 and increment by
1 each time a button is clicked. Use state to manage the counter value.

Partial code:

import React, { useState } from 'react';

const Counter = () => {

// TODO: Initialize state for the counter

const incrementCounter = () => {

// TODO: Implement counter increment logic
};

return (
<div>
<p>Counter: {/* TODO: Display counter value */}</p>
<button onClick={/* TODO: Attach click event */}>Increment</button>
</div>
);
};

export default Counter;

Answer:
import React, { useState } from 'react';
const Counter = () => {
const [counter, setCounter] = useState(0);

const incrementCounter = () => {

setCounter(counter + 1);
};

return (
<div>
<p>Counter: {counter}</p>
<button onClick={incrementCounter}>Increment</button>
</div>
);
};

export default Counter;

2.Create a React component that takes a list of items as props and displays them in an unordered
list. Allow users to click on an item to mark it as "completed" and style completed items differently.

Partial Code:

import React, { useState } from 'react';

const TodoList = ({ items }) => {

// TODO: Initialize state for completed items

const handleItemClick = (index) => {

// TODO: Implement logic to mark an item as completed

};

return (

<ul>

{/* TODO: Map through items and display them as list items */}

</ul>

);

};

export default TodoList;

Answer:

import React, { useState } from 'react';

const TodoList = ({ items }) => {

const [completedItems, setCompletedItems] = useState([]);

const handleItemClick = (index) => {

const updatedCompletedItems = [...completedItems, index];

setCompletedItems(updatedCompletedItems);

};

return (

<ul>

{items.map((item, index) => (

<li

key={index}

onClick={() => handleItemClick(index)}

style={{ textDecoration: completedItems.includes(index) ? 'line-through' : 'none' }}

>

{item}

</li>

))}

</ul>

);

};

export default TodoList;

3. Create a React component that allows users to input their name and displays a greeting message.
Use state to manage the input value.
Patial Code:

import React, { useState } from 'react';

const Greeting = () => {

// TODO: Initialize state for the input value

const handleInputChange = (event) => {

// TODO: Update state with the input value

};

return (

<div>

<label>Name:</label>

<input type="text" value={/* TODO: Bind input value to state */} onChange={/* TODO: Attach
change event */} />

<p>{/* TODO: Display greeting message */}</p>

</div>

);

};

export default Greeting;

Answer:
import React, { useState } from 'react';

const Greeting = () => {

const [name, setName] = useState('');

const handleInputChange = (event) => {

setName(event.target.value);

};

return (

<div>

<label>Name:</label>

<input type="text" value={name} onChange={handleInputChange} />

<p>{name !== '' ? `Hello, ${name}!` : 'Please enter your name.'}</p>

</div>

);

};

export default Greeting;

4. Create a React component that dynamically renders a list of color squares based on an array of
color names passed as props. Each square should have a background color corresponding to its
name.

Partial Code:

import React from 'react';

const ColorList = ({ colors }) => {

return (

<div>

{/* TODO: Map through colors and display colored squares */}

</div>

);

};

export default ColorList;

Answer:

import React from 'react';

const ColorList = ({ colors }) => {

return (

<div>

{colors.map((color, index) => (

<div

key={index}

style={{ backgroundColor: color, width: '50px', height: '50px', margin: '5px', display: 'inline-
block' }}

></div>

))}

</div>

);

};

export default ColorList;

5. Create a React component that allows users to toggle the visibility of a secret message. The
component should initially hide the message and reveal it when a "Show Message" button is clicked.
Use state to manage the visibility.

Partial Code:

import React, { useState } from 'react';

const SecretMessage = () => {

// TODO: Initialize state for message visibility

const toggleVisibility = () => {

// TODO: Implement logic to toggle message visibility

};

return (

<div>

<button onClick={/* TODO: Attach click event */}>Show Message</button>

{ /* TODO: Display the secret message if visible */ }

</div>

);

};

export default SecretMessage;

Answer:

import React, { useState } from 'react';

const SecretMessage = () => {

const [isVisible, setIsVisible] = useState(false);

const toggleVisibility = () => {

setIsVisible(!isVisible);

};

return (

<div>

<button onClick={toggleVisibility}>Show Message</button>

{isVisible && <p>This is the secret message!</p>}

</div>

);

};

export default SecretMessage;

6. Create a React component that allows users to add items to a list. Users should input an item in a
text field, click an "Add" button, and see the item added to the list. Use state to manage the list of
items.

Partial Code:

import React, { useState } from 'react';

const ItemList = () => {

// TODO: Initialize state for the list of items

// (Hint: use an array to store items)

const addItem = () => {

// TODO: Implement logic to add item to the list

};

return (

<div>

<input type="text" /* TODO: Bind value to state */ />

<button onClick={/* TODO: Attach click event */}>Add</button>

<ul>

{ /* TODO: Map through items and display them as list items */ }

</ul>

</div>

);

};

export default ItemList;

Answer:

import React, { useState } from 'react';

const ItemList = () => {

const [items, setItems] = useState([]);

const [newItem, setNewItem] = useState('');

const addItem = () => {

if (newItem.trim() !== '') {

setItems([...items, newItem]);

setNewItem('');

};

return (

<div>

<input

type="text"

value={newItem}

onChange={(e) => setNewItem(e.target.value)}

/>

<button onClick={addItem}>Add</button>

<ul>

{items.map((item, index) => (

<li key={index}>{item}</li>

))}

</ul>

</div>

);

};

export default ItemList;

7. Create a React component that simulates a simple quiz. Display a question and multiple choice
answers. Allow users to select an answer and provide feedback on whether it's correct or not. Use
state to manage the selected answer.

Partial Code:

import React, { useState } from 'react';

const Quiz = () => {

// TODO: Initialize state for the selected answer

const handleAnswerSelect = (answer) => {

// TODO: Update state with the selected answer

};

return (

<div>

<h3>What is the capital of France?</h3>

<ul>

<li onClick={() => handleAnswerSelect('Paris')}>Paris</li>

<li onClick={() => handleAnswerSelect('Berlin')}>Berlin</li>

<li onClick={() => handleAnswerSelect('Madrid')}>Madrid</li>

</ul>

{ /* TODO: Display feedback based on the selected answer */ }

</div>

);

};

export default Quiz;

Answer:

import React, { useState } from 'react';

const Quiz = () => {

const [selectedAnswer, setSelectedAnswer] = useState(null);

const correctAnswer = 'Paris';

const handleAnswerSelect = (answer) => {

setSelectedAnswer(answer);

};

return (

<div>

<h3>What is the capital of France?</h3>

<ul><li

onClick={() => handleAnswerSelect('Paris')}

style={{ backgroundColor: selectedAnswer === 'Paris' ? 'green' : 'transparent' }}

>

Paris

</li> <li

onClick={() => handleAnswerSelect('Berlin')}

style={{ backgroundColor: selectedAnswer === 'Berlin' ? 'red' : 'transparent' }}

>

Berlin

</li> <li

onClick={() => handleAnswerSelect('Madrid')}

style={{ backgroundColor: selectedAnswer === 'Madrid' ? 'red' : 'transparent' }}

>

Madrid

</li> </ul>

{selectedAnswer && (

<p>{selectedAnswer === correctAnswer ? 'Correct!' : 'Incorrect!'}</p>

)}

</div>);}; export default Quiz;

8. Create a React component that dynamically renders a list of buttons. The component should take
an array of button labels as a prop and generate buttons for each label. When a button is clicked,
display an alert with the corresponding label. Use state to manage the clicked button.

Partial Code:

import React, { useState } from 'react';

const ButtonList = ({ labels }) => {

// TODO: Initialize state for the clicked button

const handleButtonClick = (label) => {

// TODO: Update state with the clicked button

// TODO: Display an alert with the corresponding label

};

return (

<div>

{labels.map((label, index) => (

<button key={index} onClick={() => handleButtonClick(label)}>

{label}

</button>

))}

{clickedButton && <p>You clicked: {clickedButton}</p>}

</div>

);

};

export default ButtonList;

Answer:

import React, { useState } from 'react';

const ButtonList = ({ labels }) => {

const [clickedButton, setClickedButton] = useState(null);

const handleButtonClick = (label) => {

setClickedButton(label);

alert(`You clicked: ${label}`);

};

return (

<div>

{labels.map((label, index) => (

<button key={index} onClick={() => handleButtonClick(label)}>

{label}

</button>

))}

{clickedButton && <p>You clicked: {clickedButton}</p>}

</div>

);

};

export default ButtonList;

9. Create a React component that displays a personal information. The component should

take an array of objects with personal information and display the data using map and list.

Partial Code:

import React from ‘react’;

const people = [

// TODO: Create the Personal Contact];

return (

<div>

// TODO: Display the Personal Contact using map and list

</div>

);

};

import React from 'react';

const people = [

{ id: 1, name: 'John', age: 25, email: '[email protected]' },

{ id: 2, name: 'Jane', age: 30, email: '[email protected]' },

// Add more personal information objects as needed

];

const PersonalInfoComponent = () => {

return (

<div>

<h1>Personal Information</h1>

<ul>

{people.map(person => (

<li key={person.id}>

<strong>Name:</strong> {person.name}, <strong>Age:</strong> {person.age},

<strong>Email:</strong> {person.email}
</li>

))}

</ul>

</div>

);

};

export default PersonalInfoComponent;

10. 10. Create a React component that displays a personal information. The App component

should take an array of objects with personal information and the DetailsComponent display

the data using map and list.

Partial Code:

App.js

import React from ‘react’;

const people = [

// TODO: Create the Employee Contact];

return (

<div>

// TODO: Pass the Employee data to Detail Component

</div>

);

};

Detail Component.js

import React from ‘react’;

function DetailComponent( __________)

return (

<div>
// TODO: Employee data to Display

</div>

);

};

App.js

import React from 'react';

import DetailComponent from './DetailComponent';

const employees = [

{ id: 1, name: 'John', position: 'Software Engineer' },

{ id: 2, name: 'Jane', position: 'Product Manager' },

// Add more employee data as needed

];

const App = () => {

return (

<div>

<h1>Employee Information</h1>

<DetailComponent employees={employees} />

</div>

);

};

export default App;

DetailComponent.js

import React from 'react';

function DetailComponent({ employees }) {

return (

<div>

<h2>Employee Details</h2>

<ul>

{employees.map(employee => (

<li key={employee.id}>

<strong>Name:</strong> {employee.name}, <strong>Position:</strong> {employee.position}

</li>

))}

</ul>

</div>

);

export default DetailComponent;