Khushijha_Frontend

[khushiJha11]

1.Explain what the simple List component does.

A straightforward React component called List renders an array of items as a list from a prop.
Each item is represented by a SingleListItem component, which renders the item's text and illuminates it when it is selected.
The setSelectedIndex hook is used to update the selectedIndex state to the clicked item's index once the handleClick method is invoked with the item's index as an input.
Every time the items prop changes, the useEffect hook is used to reset the selectedIndex state to null, making sure that no item is selected when the list changes.

By only re-rendering the relevant higher-order component when its properties have changed,
the List component improves rendering efficiency. The SingleListItem component, which is also memoized, operates in the same way.
Additionally, PropTypes are used to define the kinds of the props supplied to each component and to issue helpful warnings during development if the props are the incorrect type.
A single item in the list is represented by the SingleListItem component, which is also described in the code. The props that it accepts are text, isSelected, index, and onClickHandler. The text prop is a string that symbolises the item's text content. The boolean value of the isSelected prop shows if the object is currently selected. An integer that represents the item's index in the items array is the index prop.
When a user clicks on the item, the callback function specified by the onClickHandler parameter is activated.
The SingleListItem component registers a onClick event handler that calls the onClickHandler prop with the index prop as an argument and renders a list item ( ) with a background colour that depends on the isSelected value.

Using the useState hook, the List component creates the selectedIndex state variable.
Every time the items prop changes, the selectedIndex state variable is reset to null using the useEffect hook. Each SingleListItem component's onClickHandler prop uses the handleClick function as a callback.
The index argument supplied to it sets the selectedIndex state variable to that value.
Finally, after traversing the items array, the List component produces a SingleListItem component for each item while handing in the required props. The memo higher-order component,
which optimises rendering by only re-rendering the component if its props have changed, wraps the List component.

---

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

1. setSelectedIndex it should be a function returned by useState, but here it is presently just a variable declaration
   The correct declaration should be: const [selectedIndex, setSelectedIndex] = useState(null);

2.The index prop in SingleListItem is marked as PropTypes.number
nonetheless, it is not marked as necessary. It should be marked as required: index: PropTypes.number.isRequired.

3.The isSelected prop in SingleListItem is marked as PropTypes.bool but it's not initialized properly..
It should be initialized with a boolean value, such as false or true , since it is used to determine the background color.
It should be initialized like this: isSelected={selectedIndex === index}.

4.The items prop in WrappedListComponent is marked as PropTypes.array
but here it should be marked as PropTypes.arrayOf ,because it is an array of objects.
It should be marked like this: items: PropTypes.arrayOf(PropTypes.shape({ text: PropTypes.string.isRequired })).

5.The items prop in WrappedListComponent is marked with a default value of null,
however it should be initialized as an empty array instead, like this: items: [].

6.The onClick handler in SingleListItem is not being called correctly.
It should be wrapped in an arrow function to prevent it from being called immediately on render.
It should be written like this: onClick={() => onClickHandler(index)}.

7.The memo function is being called on the wrong component in SingleListItem and WrappedListComponent.
It should be called on the component that is being exported.
The correct code should be: export default memo(WrappedSingleListItem) and export default memo(WrappedListComponent).

8.There is a missing key prop in the items.map function in WrappedListComponent.
It is recommended to add a unique key prop to each element when rendering a list of items to help React optimize the rendering process.
The key prop should be added like this: <SingleListItem key={item.id} ... />, where item.id is a unique identifier for each item in the list.
If there is no unique identifier available, the index can be used instead: <SingleListItem key={index} ... />.

---

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

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

// Single List Item
const WrappedSingleListItem = ({
index,
isSelected,
onClickHandler,
text,
}) => {
return (<div style={{textAlign:'center' , padding:'10px'}}>
<button
style={{ backgroundColor: isSelected ? 'green' : 'red'}}
//first error
onClick={()=>onClickHandler(index)}
>
{text}


);
};

WrappedSingleListItem.propTypes = {
//second error
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,
}) => {
//third error
const [ selectedIndex, setSelectedIndex] = useState();

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

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

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

)
};

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

WrappedListComponent.defaultProps = {
//seventh error
items: [{ text: 'Khushi Jha Frontend !' },
{text:'Click to see the change '}],
};

const List = memo(WrappedListComponent);

export default List;