Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Challenge | Lifecycle Methods
React Tutorial

bookChallenge

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

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 8

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Pregunte me preguntas sobre este tema

Resumir este capítulo

Mostrar ejemplos del mundo real

Awesome!

Completion rate improved to 3.13

bookChallenge

Desliza para mostrar el menú

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

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 8
some-alt