Tanya_frontend

[tanyacodess]

Question1-Explain what the simple List component does. 1.The List component is a React component that receives an array of objects, called 'items', as props. It is designed to display a list of items on a webpage and allow users to select items from that list.

2. The List component uses the 'map' function to iterate through the 'items' array and render a new component, called 'SingleListItem', for each item in the array. The 'SingleListItem' component receives several props, including an 'onClickHandler' function, a 'text' string, the current index of the item, and a boolean value called 'isSelected'.
3. The 'onClickHandler' function is responsible for handling clicks on each item and updating the state of the List component accordingly. When an item is clicked, the 'selectedIndex' hook in the List component is set to the current index of the clicked item. This allows the List component to keep track of which item is currently selected.
4. The 'isSelected' boolean value determines the background color of each list item. If the 'isSelected' value is true, the background color of the item is set to green. If 'isSelected' is false, the background color is set to red. This helps users to easily see which item is currently selected.
5. The List component uses React hooks, such as 'useState' and 'useEffect', to manage its state and handle user interactions. The 'handleClick' function is used to update the selected index when an item is clicked. The 'WrappedSingleListItem' component is a memoized functional component that displays a single item with a background color based on its selection status. This component is used to render each item in the list.
6. The 'WrappedListComponent' component generates a list of items by using the 'WrappedSingleListItem' component. This creates an interactive list of selectable items for users to interact with on the website. Overall, the List component is a powerful tool for creating dynamic and interactive lists on web pages.

Question2-What problems / warnings are there with code?

1. In order to pass a parameter in a function in the 'onClick' event, the attribute should be returned by an arrow function, like this:

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

2, The 'index' and 'isSelected' props should be required, along with the 'onClickHandler' and 'text' props, like this:

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

3. The 'setSelectedIndex' function should come after the 'selectedIndex' state variable when creating the useState hook, like this:

const [selectedIndex, setSelectedIndex] = useState();

4.The 'isSelected' prop should pass a boolean value by checking if the 'selectedIndex' is equal to the 'index', like this:

isSelected={selectedIndex === index}

5.Each child in a list should have a unique "key" prop, like this:

key={index}

6.The PropTypes validation for the 'items' prop should use 'arrayOf' instead of 'array' and 'shape' instead of 'shapeOf', like this:

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

7.The default props for the 'items' prop should be an empty object array instead of a null value, like this:

WrappedListComponent.defaultProps = { items: [{ text: 'No items' }], };

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

// Single List Item const WrappedSingleListItem = ({ index, isSelected, onClickHandler, text, }) => { return ( <li className='li' style={{ backgroundColor: isSelected ? 'green' : 'red'}} onClick={()=>onClickHandler(index)}

{text} ); };

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

useEffect(() => { setSelectedIndex(0); }, [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={index === selectedIndex} /> )) } ) };

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

WrappedListComponent.defaultProps = { items: [ { text:"Tanya"}, { text:"12015835"}, {text:"BTECH"}, {text:”Computer science"} ], };

const List = memo(WrappedListComponent);

export default List;