Ranjeet_frontend

[RanjeetKumar7b]

Question 1. Explain what the simple List component does.

solution:-
A user interface (UI) component called Simple List shows a list of things in either a vertical or horizontal manner.
It is a frequently utilised user interface element in a lot of web and mobile applications.
The Simple List component can be customised to incorporate additional elements like photos, checkboxes,
or buttons in addition to the text or icons that are typically displayed for each item.
The list can be static or dynamic, which means that it can be filled with information from a user input or a database.
Additionally, the Simple List component may be used with other UI elements to build more intricate user interfaces,
including drop-down menus or navigation bars.
Many developers and designers favour it because of its simplicity and adaptability.

Question 2. What problems / warnings are there with code?
This code contains one warning and five issues.

Code modifications: 1. Before

onClick={onClickHandler(index)}
Arrow function usage
when rectified

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

useState(); const [setSelectedIndex, selectedIndex];
Instead of leaving the selectedIndex empty, initialise it to 1.
when rectified

Before using useState(-1), const [selectedIndex, setSelectedIndex]

Single List Item On Click Handler =() handleClick(index)}
text={item.text}
a href="#">index=index" isSelected=selectedIndex/a>
The problem is caused by a discrepancy between the provided value, which is string, and the declared value of propType, which is boolean.
when rectified

SingleListItem key="index" onClickHandler="()" => handleClick(index)}
isSelected=[selectedIndex===index] isSelected=[item.text] />
Before

PropTypes.array (PropTypes.shapeOf)
The right names for the functions are arrayOf() and shape().
when rectified

PropTypes.arrayOf(PropTypes.shape Before items

Items: null, items; WrappedListComponent.defaultProps;
The array was not initialised, which is why we are experiencing this error; initialising the array will allow us to fix the problem.
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},
],
};
React Hook useEffect contains the error:'setSelectedIndex' is a missing dependency. Const [setSelectedIndex, selectedIndex] = useState() generates the warning "Either include it or remove the dependency array;" this warning may be corrected to const [selectedIndex, setSelectedIndex] = useState(-1);

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

solution:-
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)} // modified
>
{text}

);
};

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(null); // modified

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

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

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

);
};

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

WrappedListComponent.defaultProps = {
items: [
{ text: "FrontEnd | Steeleye" },
{ text: "BackEnd | Steeleye" },
{ text: "Data Engineer | Steeleye" },
],
};

const List = memo(WrappedListComponent);

export default List;