Challenge
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 thestate
variable. - Implement a
componentDidMount
function calling thefetchItems
method. - Write two conditions, one that checks whether the item is in the array using
includes
and the other using thefind
method. - Set the state variable
items
in thefetchData
method. - Add a list item looping over the items.
Hints:
ComponentDidMount
has no params, just calls the methodthis.fetchItems
.- Match the
newItem
in includes and for find check whetheritem.name
matches or not. - Remember to add the key to the list item as
item.id
along with the name.
Everything was clear?
Course Content
React Tutorial
React Tutorial
3. Functional Components and Hooks
Challenge
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 thestate
variable. - Implement a
componentDidMount
function calling thefetchItems
method. - Write two conditions, one that checks whether the item is in the array using
includes
and the other using thefind
method. - Set the state variable
items
in thefetchData
method. - Add a list item looping over the items.
Hints:
ComponentDidMount
has no params, just calls the methodthis.fetchItems
.- Match the
newItem
in includes and for find check whetheritem.name
matches or not. - Remember to add the key to the list item as
item.id
along with the name.
Everything was clear?