Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Challenge | Functional Components and Hooks
React Tutorial

bookChallenge

Task

Now that we have learned the basics and the needed starting point for Functional Components in React, we will now go over a challenge that will help you get practical experience in creating components and getting familiar with coding components from scratch.

Your tasks are as follows:

  • Initialize the count to 0 and create a function to increment it.

  • Use the useEffect hook to log a message every time the count is updated.

  • Fill in with the function to multiply count by and return that value.

  • Add two paragraphs here displaying the current count and the double count.

  • Set the onclick method to a function that adds one to the count by calling setCount.

Hints:

  • Use the useState hook to initialize the value to zero.

  • Use the console.log(count) in the useEffect hook and have the count variable as a dependency.

  • Create an arrow function that simply returns count * 2.

  • Pass in count + 1 to the setCount function which should be called in the button.

Solution

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 7

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 3.13

bookChallenge

Deslize para mostrar o menu

Task

Now that we have learned the basics and the needed starting point for Functional Components in React, we will now go over a challenge that will help you get practical experience in creating components and getting familiar with coding components from scratch.

Your tasks are as follows:

  • Initialize the count to 0 and create a function to increment it.

  • Use the useEffect hook to log a message every time the count is updated.

  • Fill in with the function to multiply count by and return that value.

  • Add two paragraphs here displaying the current count and the double count.

  • Set the onclick method to a function that adds one to the count by calling setCount.

Hints:

  • Use the useState hook to initialize the value to zero.

  • Use the console.log(count) in the useEffect hook and have the count variable as a dependency.

  • Create an arrow function that simply returns count * 2.

  • Pass in count + 1 to the setCount function which should be called in the button.

Solution

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 7
some-alt