Scribd
Upload
16 views

React Props and State Subjective

The document provides partial code for 10 React components and tasks the student to complete the components by initializing state, passing props, mapping over arrays, and conditionally rendering elements based on state values. The components cover basic React concepts like state, props, mapping, conditional rendering, and lifting state. They include counters, todo lists, forms, color squares, toggling messages, adding items to lists, quizzes, and displaying personal data.

Uploaded by

janet
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views

React Props and State Subjective

The document provides partial code for 10 React components and tasks the student to complete the components by initializing state, passing props, mapping over arrays, and conditionally rendering elements based on state values. The components cover basic React concepts like state, props, mapping, conditional rendering, and lifting state. They include counters, todo lists, forms, color squares, toggling messages, adding items to lists, quizzes, and displaying personal data.

Uploaded by

janet
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

ReactJS - Props and State - Subjective

Marks:10 * 3 = 30

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 = () => {


const[count,setCount]=useState(0); // TODO: Initialize state for the counter

const incrementCounter = () => {setCount(count+1)}


// TODO: Implement counter increment logic
};

return (
<div>
<p>Counter: {/* TODO: Display counter value */}</p>
<button onClick={()=>setCount(count+1)}/* TODO: Attach click event
*/}>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;


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;


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;
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;


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;


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;


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;


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>
);
};
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>
);
};

You might also like