SHREE CHAKRA

[ShreeChakra]

Question 1: Explain what the simple List component does. Ans: To be precise, we use List Component when we have to render some list of items on our application. For example list of Laptops, a list of Mobiles, etc. Usually, we use the map() function to map data from a list or array and display them onto the DOM or to another component. For example:

`const myList = ['Apple', 'OnePlus', 'Samsung'];
const listItems = myList.map((myList)=>{
return

{myList}

;
});
ReactDOM.render(

{listItems}

); ` This will give an output something like this :

->Apple ->OnePlus ->Samsung

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

(a) The onClickHandler in WrappedSingleListItem is called immediately instead of being passed as a function. <li style={{ backgroundColor: isSelected ? 'green' : 'red'}} onClick={onClickHandler(index)}>{text}

(b) array should be arrayOf as we are defining type of array elements as well. shapeOf should be shape. WrappedListComponent.propTypes = { items: PropTypes.array(PropTypes.shapeOf({ text: PropTypes.string.isRequired, })), }; (c) following the convention, the return value of useState should be destructured like this: [selectedIndex, setSelectedIndex] = useState() const [setSelectedIndex, selectedIndex] = useState();

Question 3: Please fix, optimize, and/or modify the component as much as you think is necessary. Ans: The final code looks like

`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:"HTML"}, { text:"CSS"}, {text:"Javascript"}, {text:"React"} ], };

const List = memo(WrappedListComponent);

export default List;`