Apurvasingh_Frontend

[Apurv-Chauhan]

1.Explain what the simple List component does.

The simple List component is a common front-end development user interface element for displaying a list of things. It enables developers to simply display a list of things, either ordered or unordered, on a web page or application. The basic List component normally accepts an array of data as input, with each member in the array representing a list item.

2) What problems / warnings are there with code?

i. The declaration of the items prop in the WrappedListComponent component is incorrect and will result in a TypeError. PropTypes.shapeOf is not a valid function and should be replaced with PropTypes.arrayOf(PropTypes.shape({text: PropTypes.string.isRequired})).

ii. The onClickHandler property in the WrappedSingleListItem component is not being called correctly. It should be passed as a callback function to be triggered when the list item is clicked.

iii. The default value of null for the items prop in the WrappedListComponent component could cause issues when attempting to perform mapping operations on it. It's better to set it to an empty array ([]) to avoid these problems . iv. The isSelected property in the WrappedSingleListItem component is not being set correctly. As it stands, all list items will be green when selectedIndex is truthy. To fix this, isSelected should be set to isSelected = (selectedIndex === index).

3) Please fix, optimize, and/or modify the component.

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(0);

useEffect(() => { setSelectedIndex(0); }, [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={index === selectedIndex} /> ))} ); };

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

WrappedListComponent.defaultProps = { items: [ { text: "Apurvasingh" }, { text: "Chauhan" }, { text: "12015720" } ] };

const List = memo(WrappedListComponent);

export default List