DINESHG

[DINESHG-12006265]

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

2)What problems / warnings are there with code?

1.In the WrappedSingleListItem component onClick prop should be a function that calls OnClickHandler with the index parameter when the list element is clicked. To correct this we should change: onClick={onClickHandler(index)} to onClick={() => onClickHandler(index)}.

2. WrappedListComponent component the useState hook should be intialized with default value '0' , as the selectedIndex state variable represents the index of the selected list item. So changes are to be made as follows: const [setSelectedIndex,selectedIndex] = useState(); to const [selectedIndex, setSelectedIndex] = useState(0); 3.In the WrappedListComponent the items should be defined as an array of objects with a text property is required. Therefore items:null should be changed as items: [ { text: "Express"}, { text: "Mongo DB"}, {text:"ReactJS"}, {text:"Node JS"} ], 4.shapeOffunction need to be changed to shape.This is generally used to define a set of keys for an object and validate its data type. Changes are made to be as follows: PropTypes.array(PropTypes.shapeOf({text: PropTypes.string.isRequired}))to items: PropTypes.arrayOf(PropTypes.shape({text: PropTypes.string.isRequired})).isRequired

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

Answer-3 After doing all the necessary changes and removing the warning, the following code look like this-

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

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

{text} ); });

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

// List Component const List = memo(({ items }) => { const [selectedIndex, setSelectedIndex] = useState(null);

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

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

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

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

List.defaultProps = { items: null, };

export default List;

There should be one list component which is sending list of item as props, which look like this -

import React from 'react' import WrappedListComponent from "./List" function Newlist() { const items = [ {text: "Item 1"}, {text: "Item 1"}, {text: "Item 1"}, {text: "Item 1"}, {text: "Item 1"}, {text: "Item 1"}, {text: "Item 1"},

]

return (

) } export default Newlist;`