Shruti Rajput _Front End

[Shrutii-rajput]

Quest 1. Explain what the simple List component does. The List component in React displays a collection of items as an unordered list. Each item is represented by the SingleListItem component, which includes text and a background color that changes based on whether it is currently selected. The List component is responsible for keeping track of which item is selected and updating it when the user clicks on a different item. To optimize performance, the List component uses memoization to prevent unnecessary re-rendering of its child components.

Quest2. What problems / warnings are there with code? Some of the problems / warnings with the code in my opinion, are:** The useState hook in the WrappedListComponent is used incorrectly. The first element of the array returned by useState should be the state variable and the second element should be the function to update the state. In this case, it should be [selectedIndex, setSelectedIndex] instead of [setSelectedIndex, selectedIndex] The SingleListItem component does not have a key prop, which is required when rendering a list of elements in React. This will cause a warning and may affect the performance and correctness of the rendering. The isSelected prop of the SingleListItem component is a boolean value that indicates whether the item is selected or not. However, the code passes the selectedIndex value, which is a number or null. This will cause a type mismatch warning and may result in incorrect behavior of the component. The items prop of the WrappedListComponent component has an incorrect type definition. It should be PropTypes.arrayOf instead of PropTypes.array. The WrappedListComponent component does not handle the case when the items prop is null or undefined. This will cause an error when trying to map over the items array.

Q3-Please fix, optimize, and/or modify the component as much as you think is necessary.

import React, { useState, useEffect, memo } from 'react';
import PropTypes from 'prop-types';

// Single List Item
const WrappedSingleListItem = ({
index,
isSelected,
onClickHandler,
text,
}) => {
return (
<li
style={{ backgroundColor: isSelected ? 'green' : 'red'}}
onClick={() => onClickHandler(index)}
>
{text}

);
};

WrappedSingleListItem.propTypes = {
index: PropTypes.number.isRequired,
isSelected: PropTypes.bool.isRequired,
onClickHandler: PropTypes.func.isRequired,
text: PropTypes.string.isRequired,
};

const SingleListItem = memo(WrappedSingleListItem);

// List Component
const WrappedListComponent = ({
items,
}) => {
const [selectedIndex, setSelectedIndex] = useState(null);

useEffect(() => {
setSelectedIndex(null);
}, [items]);

const handleClick = index => {
setSelectedIndex(index);
};

return (
<ul style={{ textAlign: 'left' }}>
{items && items.map((item, index) => (
<SingleListItem
key={index}
onClickHandler={() => handleClick(index)}
text={item.text}
index={index}
isSelected={selectedIndex === index}
/>
))}

)
};

WrappedListComponent.propTypes = {
items: PropTypes.arrayOf(PropTypes.shape({
text: PropTypes.string.isRequired,
})),
};

WrappedListComponent.defaultProps = {
items:[
{text : "Steelye"},
{text : "Intern"},
{text : "B.tech"}
],
};

const List = memo(WrappedListComponent);

export default List;