This is my submission to the assignment of the front-end engineering role for your company "Steeleye".
I have fixed the issues and attached all the necessary links the GitHub repo link, and pdf file link, Please find them below.
Ans: The Simple List Component in React is a reusable component that displays a list of items and allows the user to select one item. It comprises two sub-components, WrappedSingleListItem and WrappedListComponent.
The WrappedSingleListItem renders individual list items and sets the style of the li element based on whether the item is selected or not.
The WrappedListComponent renders the list by mapping over the array of items and passing each item to the SingleListItem component, which is a memoized version of WrappedSingleListItem.
When an item is clicked, its background color changes to green to indicate that it is the current selection.
Additionally a memoized functional component, the "WrappedListComponent" produces a list of items by utilizing the "WrappedSingleListItem" component. It accepts the "items" parameter, which is an array of objects with the "text" and "key" attributes. The component keeps track of the index of the currently selected item using the "useState" hook and the "useEffect" hook.
Error 1:
PropTypes is a type-checking library in React that helps validate props passed to components and throws errors if the prop types don't match the expected type
The code bellow has a syntax error. The “shapeOf” should be replaced with “shape”.
The code below has a syntax error. The “array” should be replaced with “arrayOf”. As there is no keyword named “array” in “prop-type” in rather it is “arrayOf”
In the code below the “selectedIndex” is a useState variable and “selectedIndex” is a useState function that is used to update the value of the “selectedIndex” variable. In a useStatate function variable, the first parameter should be the variable and the second parameter should be the function used to update the variable. In the code, the places of the two parameters were interchanged in an improper way
To initialize a variable with an empty array we should use “[]”. But in the code, the variable items are initialized with “null”. This is an anti-pattern in Reactjs development, Using “null” is not recommended.
While mapping the elements of an array using the array “map” function a unique “key” is required to distinguish and keep a track of the elements traversed. The key was missing earlier which was fixed in my code. Refer to “fixed code".
The problem is that calling those setters while rendering is never a good idea. The result will be a warning message. To get rid from this warning we have to use an “arrow function”.
Here the “isSelected “ is expecting a bool value as a parameter and validates using react “prop-types”. To fix this error we have to replace {selectedIndex} to === {selectedIndex === index}.
Dear Sir/Ma'am
This is my submission to the assignment of the front-end engineering role for your company "Steeleye". I have fixed the issues and attached all the necessary links the GitHub repo link, and pdf file link, Please find them below.
Repository Link:
https://github.com/sshivam12/Frontend-Engineer-Assignment---Shivam-Sahu-12018146--LPU
PDF link :
https://drive.google.com/file/d/14e6xmMT5Ddjg-PnCx8PxDz4GdNmTat3I/view?usp=sharing
Q1 Explain what the simple List component does.
Ans: The Simple List Component in React is a reusable component that displays a list of items and allows the user to select one item. It comprises two sub-components, WrappedSingleListItem and WrappedListComponent. The WrappedSingleListItem renders individual list items and sets the style of the li element based on whether the item is selected or not. The WrappedListComponent renders the list by mapping over the array of items and passing each item to the SingleListItem component, which is a memoized version of WrappedSingleListItem. When an item is clicked, its background color changes to green to indicate that it is the current selection.
Additionally a memoized functional component, the "WrappedListComponent" produces a list of items by utilizing the "WrappedSingleListItem" component. It accepts the "items" parameter, which is an array of objects with the "text" and "key" attributes. The component keeps track of the index of the currently selected item using the "useState" hook and the "useEffect" hook.
Error 1:
PropTypes is a type-checking library in React that helps validate props passed to components and throws errors if the prop types don't match the expected type The code bellow has a syntax error. The “shapeOf” should be replaced with “shape”.
WrappedListComponent.propTypes = { items: PropTypes.array(PropTypes.shapeOf( { text: PropTypes.string.isRequired, } )), };Correct Code
WrappedListComponent.propTypes = { items: PropTypes.arrayOf( PropTypes.shape({ text: PropTypes.string.isRequired, }) ), };Error 2:
The code below has a syntax error. The “array” should be replaced with “arrayOf”. As there is no keyword named “array” in “prop-type” in rather it is “arrayOf”
WrappedListComponent.propTypes = { items: PropTypes.arrayOf(PropTypes.shape({ text: PropTypes.string.isRequired, })), };Correct Code
WrappedListComponent.propTypes = { items: PropTypes.array(PropTypes.shape({ text: PropTypes.string.isRequired, })), };Error 3:
In the code below the “selectedIndex” is a useState variable and “selectedIndex” is a useState function that is used to update the value of the “selectedIndex” variable. In a useStatate function variable, the first parameter should be the variable and the second parameter should be the function used to update the variable. In the code, the places of the two parameters were interchanged in an improper way
const [ setSelectedIndex , selectedIndex ] = useState();Correct Code
const [selectedIndex, setSelectedIndex] = useState(null);Error 4:
To initialize a variable with an empty array we should use “[]”. But in the code, the variable items are initialized with “null”. This is an anti-pattern in Reactjs development, Using “null” is not recommended.
WrappedListComponent.defaultProps = { items: null, };Correct Code
WrappedListComponent.defaultProps = { items: [], };Warning 1:
While mapping the elements of an array using the array “map” function a unique “key” is required to distinguish and keep a track of the elements traversed. The key was missing earlier which was fixed in my code. Refer to “fixed code".
<ul style={{ textAlign: 'left' }}> {items.map((text , index) => ( <SingleListItem onClickHandler={() => handleClick(index)} text={text} index={index} isSelected={selectedIndex === index} key = {key} /> ))}Correction Error
<ul style={{ textAlign: 'left' }}> {items.map(({text, key}, index) => ( <SingleListItem onClickHandler={() => handleClick(index)} text={text} index={index} isSelected={selectedIndex === index} key = {key} />))}Warning 2;
The problem is that calling those setters while rendering is never a good idea. The result will be a warning message. To get rid from this warning we have to use an “arrow function”.
Correction Error
`return ( <li style={{ backgroundColor: isSelected ? 'green' : 'red'}} onClick={onClickHandler(index)}
Warning 3;
Here the “isSelected “ is expecting a bool value as a parameter and validates using react “prop-types”. To fix this error we have to replace {selectedIndex} to === {selectedIndex === index}.
<ul style={{ textAlign: 'left' }}> {items.map((item, index) => ( <SingleListItem onClickHandler={() => handleClick(index)} text={item.text} index={index} isSelected={selectedIndex} /> ))} </ul>Correction
<ul style={{ textAlign: 'left' }}> {items.map(({text, key}, index) => ( <SingleListItem onClickHandler={() => handleClick(index)} text={text} index={index} isSelected={selectedIndex === index} key = {key} /> ))}Q3. Fixed, optimize, and/or modify the component.
The complete code of “List” component with appropriate changes
`import React, { useState, useEffect, memo } from 'react'; import PropTypes from 'prop-types'; // Single List Item const WrappedSingleListItem = memo(({ index, isSelected, onClickHandler, text, }) => { return ( <li style={{ backgroundColor: isSelected ? 'green' : 'red'}} onClick={()=>onClickHandler(index)}
WrappedSingleListItem.propTypes = { index: PropTypes.number, isSelected: PropTypes.bool, onClickHandler: PropTypes.func.isRequired, text: PropTypes.string.isRequired, };
const SingleListItem = memo(WrappedSingleListItem);
// List Component const WrappedListComponent = ({ items, }) => { const [selectedIndex, setSelectedIndex] = useState(null);
useEffect(() => { setSelectedIndex(null); }, [items]);
const handleClick = index => { setSelectedIndex(index); };
return ( <ul style={{ textAlign: 'left' }}> {items.map(({text, key}, index) => ( <SingleListItem onClickHandler={() => handleClick(index)} text={text} index={index} isSelected={selectedIndex === index} key = {key} /> ))} <button onClick={()=>setSelectedIndex(null)}>clear
) };
WrappedListComponent.propTypes = { items: PropTypes.arrayOf( PropTypes.shape({ text: PropTypes.string.isRequired, }) ), };
WrappedListComponent.defaultProps = { items: [], }; const List = memo(WrappedListComponent); export default List;
`
I'm eagerly anticipating my upcoming employment, feeling enthusiastic about embarking on a new career journey.
Yours Sincerely Shivam Sahu Lovely Professional University, Phagwara Punjab Reg No: 12018146 anshivamsahu14@gmail.com +91-7393883825