Shubham Sharan_Frontend

[shubham596]

To view the live website-Click Here
To view the Code-Click Here

Q1.Explain what the simple List component does.

Ans: The List component maps over the items prop, which is an array of items, and renders a SingleListItem component for each item in the list. The SingleListItem component is a memoized functional component that receives props for the item's index, selected state, text, and click event handler.The List component is a functional component that utilizes the useState and useEffect hooks to manage the state of the component. Specifically, useState is used to define the selectedIndex state variable, which keeps track of the currently selected item in the list, while useEffect is used to reset the selected index to null whenever the items prop changes.The SingleListItem component renders an li element with the text prop as its content. The element's background color is determined by the value of the isSelected prop, which is true when the item is selected. The onClick event of the li element calls the onClickHandler prop with the index of the item as an argument, which updates the selectedIndex state variable in the List component.

Q2.What problems/warnings are there with the code?

Ans: There are 6 major problems with the code

a. Unique key prop is missing for List items.

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

b. Here isSelected show get the boolean value instead of a integer (SelectedIndex)

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

c. In mainstream we don't like defining props as NULL

WrappedListComponent.defaultProps = {
  items: null,
};

d. Syntax errors in the following code.

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

e. The onClick Events should use function reference but here here its a function call. Function Call would have been fine if there was arrow function.

<li style={{ backgroundColor: isSelected ? "green" : "red" }}
     onClick={onClickHandler(index)}>
      {text}
</li>

f. useState variables have wrong place.

const [setSelectedIndex, selectedIndex] = useState();

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

Ans:The Optimized Code is below

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 ? "yellow" : "blue" }}
      onClick={() => onClickHandler(index)}
    >
      {text}
    </li>
  );
};

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

const SingleListItem = memo(WrappedSingleListItem);

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

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

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

  const mystyle = {
    color: "white",
    backgroundColor: "DodgerBlue",
    padding: "50px",
    margin: "30px",
    fontFamily: "Arial"
  };

  return (
    <ul style={mystyle}>
      {items.map((item, index) => (
        <SingleListItem
          key={index}
          onClickHandler={() => handleClick(index)}
          text={item.text}
          index={index}
          isSelected={index === selectedIndex}
        />
      ))}
    </ul>
  );
};

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

WrappedListComponent.defaultProps = {
  items: [
    {
      text: "Name: Shubham Sharan"
    },
    {
      text: "Reg:No- 12007174"
    },
    {
      text: "Steeleye Assignment"
    }
  ]
};

const List = memo(WrappedListComponent);

export default List;

Screenshot