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