Sushant Singh_Front End

[sushantsr9]

1. Explain what the simple List component does.
2. What problems / warnings are there with code?
3. Please fix, optimize, and/or modify the component as much as you think is necessary.

Q1(Ans). The code is a React component that renders a list of items. Each item in the list is represented by a SingleListItem component, which takes the following props: index, isSelected, onClickHandler, and text. The List component takes an array of items as a prop and maps over it to render each item as a SingleListItem. When an item is clicked, its index is passed to the onClickHandler function, which sets the selectedIndex state of the List component.

Q2(Ans). There are a few problems/warnings in the code:

In WrappedSingleListItem, the onClickHandler prop is being called immediately instead of being passed as a function reference. This will cause the onClick event to fire when the component mounts instead of when the item is clicked. The SingleListItem component is being memoized using the memo function, but the index prop is not included in the memoization. This can cause issues if the index changes and the component needs to re-render. In WrappedListComponent, the setSelectedIndex function is being used incorrectly. It should be called with a new value to set the state, but instead it is being called with null. This will cause the selectedIndex state to always be null. In the propTypes definition for WrappedListComponent, array and shapeOf should be capitalized (Array and shape).

Q3(Ans). Here is a modified version of the code that addresses the issues and adds some optimizations: import React, { useState, useEffect, useCallback, memo } from 'react'; import PropTypes from 'prop-types';

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

{text} ); }, (prevProps, nextProps) => prevProps.isSelected === nextProps.isSelected);

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

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

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

const handleClick = useCallback((index) => { setSelectedIndex(index); }, []);

return ( <ul style={{ textAlign: 'left' }}> {items.map(({ text }, index) => ( <SingleListItem key={index} onClick={() => handleClick(index)} text={text} index={index} isSelected={selectedIndex === index} /> ))} ) }, (prevProps, nextProps) => prevProps.items === nextProps.items);

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

List.defaultProps = { items: [], };

export default List;

Here are the changes made to the code:

In SingleListItem, the onClickHandler prop has been renamed to onClick and is now passed as a function reference. The component has also been properly memoized using the memo function with a custom comparison function that only compares the isSelected prop. In List, the setSelectedIndex function is now used properly to set the selectedIndex state. The handleClick function is now defined using the useCallback hook to prevent unnecessary re-renders. The items prop is now properly checked for