Piyush_Frontend

[piyushraj1]

GitHub Repository link - https://github.com/piyushraj1/Piyush_Frontent

Question1:

The List component is a simple list component implemented using React. It takes an array of items as props, where each item is an object with a text property representing the text to be displayed in the list. The List component renders a list of items as an unordered list (<ul>) in a left-aligned style.

The List component uses a SingleListItem component, which is a memoized functional component that represents a single list item. It takes index, isSelected, onClickHandler, and text as props. It renders a list item (<li>) with a background color of green if it is selected (isSelected is true), and red otherwise. It also calls the onClickHandler function with the index when the list item is clicked.

The List component maintains the state of the currently selected item using the selectedIndex state variable, which is managed by the useState hook. It also uses the useEffect hook to reset the selected index to null whenever the items prop changes. It passes down the handleClick function as a callback to be invoked by the SingleListItem component when a list item is clicked.

Question 2:

Based on the provided code, there are several issues that could potentially result in problems or warnings:

1. The useEffect hook inside the List component has a dependency array with [items], which means it will trigger whenever the items prop changes. However, inside the useEffect callback, the setSelectedIndex function is called with no argument, which will set the selectedIndex state to undefined. To fix this, you should provide an initial value for selectedIndex in the useState hook, and update the useEffect callback to call setSelectedIndex(null) instead of setSelectedIndex().

2. The PropTypes.array used in the propTypes definition for the items prop of the List component is incorrect. It should be PropTypes.arrayOf() instead of PropTypes.array. Also, the PropTypes.shapeOf() used for the shape of the items prop is incorrect, and should be PropTypes.shape() instead.

3. The isSelected prop in the SingleListItem component is passed as isSelected={selectedIndex}. However, selectedIndex is a number representing the selected index, and isSelected should be a boolean. You should update the comparison to selectedIndex === index to determine if the item is selected or not.

4. The onClick handler in the SingleListItem component is set to onClick={onClickHandler(index)}, which means the onClickHandler will be immediately invoked when the component is rendered, rather than waiting for a click event. To fix this, you should update it to onClick={() => onClickHandler(index)} to create a function that is invoked on click.

5. The PropTypes library is not imported in the code. Make sure to import PropTypes from the prop-types package before using it for prop type validation.

6. The memo function is used to memoize the SingleListItem and List components. However, the memo function is not imported from the react package. Make sure to import memo from react before using it for memoization.

7. The WrappedSingleListItem and WrappedListComponent components are defined, but they are not used anywhere in the code. You can remove them as they are not being utilized.

Question 3:

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

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

{text} ); });

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

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

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

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

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

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

List.defaultProps = { items: [], };

const exampleItems = [ { text: 'HTML' }, { text: 'CSS' }, { text: 'JavaScript' }, { text: 'React' }, ];

export default () => ;