Gonepreethamreddy_Frontend

[Saipreetham9171]

1. What is the Simple List Component in React?
   Ans: The Simple List Component is a React Component which takes an array of items as a prop and renders an unordered list of those items with the option to select a single item from the list.
   Upon selection, the background color of the selected list item is set to green, to indicate current selection. The Simple List Component has two components namely WrappedSingleListItem and WrappedListComponent.
   The WrappedSingleListItem has four properties:

index: the index of the item in the items array
isSelected: a boolean that indicates whether the item is currently selected or not
onClickHandler: a callback function that gets called when the list item is clicked
text: the text content of the item
Whereas, the WrappedListComponent makes use of useState() and useEffect() hook to set the color of the selected list item.
Q2. What problems / warnings are there with code?
Ans:

In the WrappedSingleListItem, the onClickHandler is not being invoked properly. Instead of being called when the list item is clicked, the onClickHandler is being called immediately when the component is rendered. The correct code should be:
onClick={()=>onClickHandler(index)}

The proptypes for index and isSelected should be isRequired as well. The correct code should be:
WrappedSingleListItem.propTypes = {
index: PropTypes.number.isRequired,
isSelected: PropTypes.bool.isRequired,
onClickHandler: PropTypes.func.isRequired,
text: PropTypes.string.isRequired,
};

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

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

const WrappedSingleListItem = ({ isselected, onClick, text }) => {
  return (
    <li
      style={{ backgroundColor: isselected ? "green" : "red" , marginTop: "10px" }}
      onClick={onClick}
    >
      {text}
    </li>
  );
};

WrappedSingleListItem.propTypes = {
  text: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
  isselected: PropTypes.bool.isRequired
};

const SingleListItem = memo(WrappedSingleListItem);

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

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

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

  return (
    <ul style={{ textAlign: "left" }}>
      {items &&
        items.map((item, index) => (
          <SingleListItem
            key={item.id}
            onClick={() => handleClick(index)}
            text={item.text}
            isselected={index === selectedIndex}
          />
        ))}
    </ul>
  );
};

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

WrappedListComponent.defaultProps = {
  items: [
    { id: 1, text: "one  A" },
    { id: 2, text: "one B" },
    { id: 2, text: "one c" },

  ]
};

const List = memo(WrappedListComponent);

export default List;