Ankush Kumar_Front End - Githubissues

Question 1. Explain what the simple List component does.

The List component consists of List Items that are wrapped in a component called WrappedSingleListItem. Each ListItem has a state called isSelected and values for text and index, as well as an event called onClickHandler. These components are memoized using memo(WrappedListComponent), which means that if the same arguments are passed, the result will be returned from memory.

The List component uses the map() method to iterate over an array of data and calls a function for each element. The resulting List Items are stored in an array called items. The background color of the text gets changed based on the state of isSelected. If the state is true, the text will be displayed in green else it will be displayed in red.

Question 2. What problems / warnings are there with code?

We get 5 problems and one warning in this code.

Changes in the code : 1. Before

onClick={onClickHandler(index)}

Using arrow function After correction

onClick={()=>onClickHandler(index)}

2. Before

const [setSelectedIndex, selectedIndex] = useState();

Initializing the selectedIndex to -1 instead of keeping it empty. After correction

const [selectedIndex, setSelectedIndex] = useState(-1);

3. Before

<SingleListItem
         onClickHandler={() => handleClick(index)}
         text={item.text}
         index={index}
         isSelected={selectedIndex}
        />

A mismatch between the declared value of propType which is boolean and the passed value which is string creates the error here After correction

<SingleListItem
          key={index}
          onClickHandler={() => handleClick(index)}
          text={item.text}
          isSelected={selectedIndex===index}
        />

4. Before

items: PropTypes.array(PropTypes.shapeOf

The correct function names are arrayOf() and shape(). After correction

items: PropTypes.arrayOf(PropTypes.shape

5. Before

WrappedListComponent.defaultProps = {
 items: null,
 };

The array was not initialize that is why we are getting the error here, we can remove the error by initializing the array. After

WrappedListComponent.defaultProps = {
    items: [
        {text: 'Item1', itemId:1},
        {text: 'Item2', itemId:1},
        {text: 'Item3', itemId:1},
        {text: 'Item4', itemId:1},
        {text: 'Item5', itemId:1},
        {text: 'Item6', itemId:1},
    ],
  };

The warning "React Hook useEffect has a missing dependency: 'setSelectedIndex'. Either include it or remove the dependency array" we get due to const [setSelectedIndex, selectedIndex] = useState(); we can remove this warning by correcting it like const [selectedIndex, setSelectedIndex] = useState(-1);

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

import React, { useState, 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}
    </li>
  );
};

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

const SingleListItem = memo(WrappedSingleListItem);

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

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

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

WrappedListComponent.defaultProps = {
  items: [
    { text: "Item1", itemId: 1 },
    { text: "Item2", itemId: 1 },
    { text: "Item3", itemId: 1 },
    { text: "Item4", itemId: 1 },
    { text: "Item5", itemId: 1 },
    { text: "Item6", itemId: 1 },
  ],
};

const List = memo(WrappedListComponent);

export default List;

Link to the github repository : https://github.com/ankushkumar74/Ankush-Kumar_Front-End

steeleye / recruitment-ext

Ankush Kumar_Front End #219