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