Scribd
Upload
6 views2 pages

React Map Use Ref Assignment

The document outlines a React assignment focused on three main tasks: creating a FruitList component that maps over an array of fruits, comparing useRef and useState in an InputLogger component, and advanced form handling in a MultiInputForm component. Each task includes specific requirements, bonus challenges, and follow-up questions to deepen understanding. The assignment emphasizes practical application of React concepts such as mapping lists, state management, and form validation.

Uploaded by

Ayaz Noori
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views2 pages

React Map Use Ref Assignment

The document outlines a React assignment focused on three main tasks: creating a FruitList component that maps over an array of fruits, comparing useRef and useState in an InputLogger component, and advanced form handling in a MultiInputForm component. Each task includes specific requirements, bonus challenges, and follow-up questions to deepen understanding. The assignment emphasizes practical application of React concepts such as mapping lists, state management, and form validation.

Uploaded by

Ayaz Noori
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

React Assignment: Mapping Lists, useRef vs useState, and Form Handling (2 Hours)

🗺 1. Mapping Lists & Keys - Task (40 mins)

Question: Given the following array:

const fruits = ["Apple", "Banana", "Mango", "Orange"];

Task: - Create a component FruitList that maps over this array and displays each fruit in a list
( <li> ). - Add a key to each list item and explain why it is necessary. - Allow users to add new fruits
using an input field and a button.

Bonus: - Add a button next to each fruit to remove it from the list. - Ensure that the list updates
reactively and keys remain consistent.

🔒 2. useRef vs useState - Task (60 mins)

Component: InputLogger

Requirements: - Create a form with one input field for typing. - Add two buttons: - Log using useState:
Logs the input value using a state variable. - Log using useRef: Logs the input value using a ref
variable.

Additional Challenge: - Add a counter using both useState and useRef to compare how they
behave with updates. - Track how many times the component re-renders using
console.log("Component re-rendered") .

Follow-up Questions: 1. What is the main difference between useState and useRef ? 2. In what
scenarios is useRef a better alternative to useState ? 3. Why doesn’t updating useRef trigger a
re-render?

3. Advanced Form Handling - Task (20 mins)

Component: MultiInputForm

Requirements: - Create a form with the following fields: - Name (text input) - Age (number input) - Is
Student (checkbox) - Favorite Subject (dropdown: Math, Science, History) - Use a single useState
object to manage the entire form. - On submit, log the complete form data.

Bonus Task: - Add form validation: - Name must be at least 3 characters. - Age must be between 10 and
100. - Subject must be selected. - Show inline error messages. - Clear form after successful submission.

1
Let me know if you want sample solutions or want this converted into a test/MCQ format!

You might also like