Day 4 of 100days of code.🙆‍♀️😅

Handling Events the React way:

React lets you add event handlers to your JSX. Event handlers are your own functions that will be triggered in response to interactions like clicking, hovering, focusing form inputs, and so on. For this concept about responding to events I will be using the React documentation.

First I am going to create a simple steps component to explain a bit.🙂👇

Adding event handlers:

To add an event handler, you will first define a function and then pass it as props to the appropriate JSX tag. For example, the previous and next buttons in the image below have no functionality. Let's change that in three steps! 💪 First, this is what our <button> JSX file looks like, with only the className and inline styles at Line 19 and 25 👇."

So three steps :

Create two functions called handlePrevious and handleNext inside the App component.
Implement a logic inside that function (use alert to show the message for previous and next respectively).
And lastly, add onClick={handlePrevious} and onClick={handleNext} to the <button> JSX.

See step 1, 2 and 3👇👌.

See results when I click on the previous button👇

Here I defined the handlePrevious and handleNext function and then passed it as props to <button> . Alternatively you can define the event handler inside of the JSX 👇

<button onClick={function handlePrevious() {

alert('Previous');

}}>

Or with the arrow function👇👇

<button onClick={() => {alert('Previous')}}>

Note: All of these styles are equivalent. Inline event handlers are convenient for short functions.

Things to take note of when adding event handlers:

Functions passed to event handlers must be passed, not called. Let's create two examples and the first will be what passing a function looks like and the second will be calling a function ❌👇

First ✔ - Passing function : <button onClick={handlePrevious}>

Second❌ - Calling function : <button onClick={handlePrevious()}>

Now the difference between these two is that In the first example, the handlePrevious function is passed as an onClick event handler. This tells React to remember it and only call your function when the user clicks the button.

In the second example, the () at the end of handlePrevious() fires the function immediately during rendering, without any clicks. This is because JavaScript inside the JSX { and } executes right away.

Remember here👆👆 we already defined the function before passing it. So now what if we want to try other alternative like defining the function in the JSX🤔🤔💭. 👇

Wrong❌ - This alert fires when the component renders, not when clicked!

<button onClick={alert('Previous')}>

Correct ✔- If you want to define your event handler inline, wrap it in an anonymous function like so👇.

<button onClick={() => alert('Previous')}>

In Conclusion:

<button onClick={handlePrevious}> passes the handlePrevious function.✔
<button onClick={() => alert('handleNext')}> passes the () => alert('handleNext') function.✔
There are also different event handlers like onMouseOver and onMouseOut, among others.

Passing event handlers as props

Just as we pass props from parent to child components, we can also pass event handlers. Now, I'll try to simplify this because React documentation almost made my brain vanish! 😢🤣

Let's say we want to move the previous and next button elements from the App component and create a separate component for them. However, we still want to trigger alert("previous") when clicking on the previous button and alert("next") when clicking on the next button. 👇👇 Now, remember our previous steps. 👇"

Since we've extracted the button JSX with the event handler from step 3 and created a new component for both buttons, we now need to figure out how to pass the function created in step 1, along with the logic added to the function in step 2, to the new components from the App component. Are you following? 🤔 Take a look at the new components I've created and how I've used them in the App component, passing the event handlers as props. 👇👇

This still works fine ✌ like when the <button> was still in the App component.👇

Naming event handler props

When it comes to naming event handler props in React, it's essential to follow a convention that is clear, descriptive, and consistent. This helps improve code readability and maintainability. Choose names that clearly indicate the purpose or action of the event. For example, if the event is handling a button click, a prop like onClick is more descriptive than something generic like handlePrevious. So, on lines 25 and 26, I may have playfully violated this rule a bit! 🤣👇👇

Time to fix this🙆‍♀️👇. I hope It's right 🤔 at Line 25 and 26.

Other rules include starting the event handler prop name with 'on' to clearly indicate that it represents an event, using descriptive names, and following the camelCase convention for event handler prop names.

Tomorrow, I'll try to make the Steps component functional. Wish me luck! 🎉🥰

Thanks for reading. I'm going to learn some more CSS now. 🙆‍♀️🎉 Have a great day!.