Task

GIven a React component that displays a list of items. The component should have two lifecycle methods: componentDidMount and componentDidUpdate.

In the componentDidMount method, you should fetch a list of items from a server and update the component's state with the new list of items. In the componentDidUpdate method, you should check if a new item has been added to the list of items. If a new item has been added, you should fetch the updated list of items from the server and update the component's state with the new list.

Your tasks are as follows:

• Initialize the empty array of items in the state variable.

• Implement a componentDidMount function calling the fetchItems method.

• Write two conditions, one that checks whether the item is in the array using includes and the other using the find method.

• Set the state variable items in the fetchData method.

• Add a list item looping over the items.

Hints:

• ComponentDidMount has no params, just calls the method this.fetchItems.

• Match the newItem in includes and for find check whether item.name matches or not.

• Remember to add the key to the list item as item.id along with the name.

Solution