You should be familiar with events if you've ever manipulated JavaScript. There's no harm in a quick reminder, though! An event is a reaction to an action carried out by the user, such as clicking a button or entering text in a form.
Some good news: with its practical and concise syntax, React makes managing events in the DOM much easier. đ
Discover the React Events Syntax
When declaring an event in React, there are a few things to remember:
Events are written within a tag in
camelCase
.You declare the event to be captured, passing it the function to be called written between curly braces.
Unlike in JS, youâll almost never have to use
addEventListener
.
Letâs try that out in our code. In components/PlantItem.js
, declare a handleClick
, which will make a log on our console:
function handleClick() {
console.log('âš This is a click âš')
}
Now add onClick={handleClick}
in the li
tag of the PlantItem
component, giving us:
className='jh-plant-item' onClick={handleClick}
className='jh-plant-item-cover' src={cover} alt={`${name} cover`}
{name}
careType='water' scaleValue={water}
careType='light' scaleValue={light}
Open the console and⊠Yay! Itâs worked! đ„ł
Letâs take this exercise a bit further by triggering an alert that displays the name of the plant that has been clicked on.
Pass plantName
as a parameter of handleClick
like this:
function handleClick(plantName) {
alert(`You want to buy 1 ${plantName}? Great choice đ±âš`)
}
But if I click on it, it doesnât work:
React passes an object by default (weâll deal with this in a few minutes), but here you want to specify your argument.
Itâs easy to do this: declare a function directly in onClick
(arrow functions are handy for doing this). This function will call handleClick, passing name
as a parameter:
onClick={() => handleClick(name)}
That should work perfectly! đ
Use Synthetic Events
Let's see what it looks like when React passes the default object as a parameter to the functions indicated in the event callback:
If you pull the parameter in handleClick:
function handleClick(e) {
console.log('âš This is my event :', e)
}
And then call it without passing the name:
onClick={handleClick}
Give it a go for yourself!
It looks like thereâs a lot of information there â how does it all relate? đ€
It is whatâs known as a synthetic event. Itâs the same interface as for native events in the DOM, except that these are compatible with all browsers.
Practical, isnât it?
Given that itâs the same interface as for native events in the DOM, do we also have access to preventDefault
and stopPropagation
?
Absolutely! You can use these methods with the parameter pulled from the function passed to the event. In our case, you could have used e.preventDefault()
. If you need a refresher on preventDefault
and stopPropagation
, read this chapter on listening for events in the course, Write JavaScript for the Web.
Create Forms More Easily With React
React simplifies form management: you can easily access the value, whether it's an input checkbox, textarea, or even a select with onChange
.
There are two main ways to manage forms: controlled and uncontrolled. You should deal with the uncontrolled method swiftly because it requires less involvement from React, which encourages the use of controlled forms.
Delegate Control Using Uncontrolled Forms
Let's look at a demonstration of an uncontrolled form. We're going to put a QuestionForm
component directly in our app's App.js
. Then we'll declare it in a separate file and add a field for a question.
Here's a form that wraps our input:
onSubmit={handleSubmit}
type='text' name='my_input' defaultValue='Type your text'
type='submit'Enter
And for handleSubmit
, we get:
function handleSubmit(e) {
e.preventDefault()
alert(e.target['my_input'].value)
}
Youâll see that React allows us to specify a defaultValue
in the input field. Let's call preventDefault
; otherwise, submit
will refresh the page.
Our alert is triggered. đ„ł
Pretty simple, isnât it? Youâre delegating the work to your DOM. Indeed, uncontrolled forms mean you don't have to manage too much information. However, this approach is a bit less React, because it has its limitations.
Instead, consider using controlled components.
Take Control of Your Forms
Local state allows you to hold specific component information and comes from an interaction that the user has had with a component.
Let's create an inputValue
variable and the function that we'll use to change its value in the local state with useState
.
The line of code below allows us to set the initial state for inputValue
and the corresponding function to modify it and to specify the default value "Ask your question here:"
const [inputValue, setInputValue] = useState("Ask your question here")
Which returns a QuestionForm
:
import { useState } from 'react'
function QuestionForm() {
const [inputValue, setInputValue] = useState('Ask your question here')
return (
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
)
}
export default QuestionForm
We passed a callback function to onChange
to save our input value in our local state. We'll access the typed input value with e.target.value
.
inputValue
now has access to the content of our input at any time. We can create a button that triggers an alert to render our input content, like this:
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onClick={() => alert(inputValue)}Alert me đš
It works!
Itâs great that I can access my input value, but why would I need to? đ€
Understand the Benefits of Controlled Forms
It means you can interact directly with the user's information and display an error message if the data is invalid or filter the data to intercept invalid values.
If we decide that the letter âfâ is not valid (an odd example, I know), we can declare the variable:
const isInputError = inputValue.includes('f')
And display an error message (or not) according to this boolean:
{isInputError && (
đ„ You are not allowed to use the letter âfâ here.
)}
Similarly, we can intercept invalid data entered by the user. To do this, declare an intermediate function:
function checkValue(value) {
if (!value.includes('f')) {
setInputValue(value)
}
}
And apply the modification in the callback function:
onChange={(e) => checkValue(e.target.value)}
Now, however many times you hammer away on the "f" key, the value will not register in your input.
You might not realize it just now, but this gives you great freedom as a developer in terms of the checks you want to create. Youâve got the power! đ„
Great, I now know two methods, but when should I use controlled components and when should I use the uncontrolled version?!
Itâs a case-by-case judgment. Youâll have to decide based on your constraints. When you have a quick component to do that isn't complex, uncontrolled input might be all you need. However, if you have checks to do, itâs certainly better to use a controlled component. There seem to be many more controlled components in codebases.
There are also libraries that you can use to manage forms and their validation as cleanly as possible, such as the tool react-hook-form.
And there you go: youâre now ready to interact with your users through events and forms. đ
Give It a Go!
Itâs now time to put all of that into practice. Youâll find the codebase you need to get started on branch P2C5-Begin.
Here's a to-do list of things you can do to improve the app:
Create an alert that is triggered when a user clicks on the CareScale component that says:
"This plant requires a small/moderate/large amount of light/water" depending on the corresponding data and whether itâs a water or light type CareScale component.
Youâll find a new
Footer
component in the codebase. To this, you should add:An input to get the userâs email address, applying the controlled component method. The state syntax used in this chapter for
inputValue
andsetInputValue
that uses useState is also written in the codebase.A
blur
event (when the user clicks outside of the field) that triggers an alert if inputValue doesnât contain the @ character. This alert should say, "Error: no @ has been entered. This is not a valid email address."
Youâll find the solution on branch P2C5-Solution.
Letâs Recap!
In React, write events within a tag in
camelCase
, and pass the function to be called.Unlike in JS, youâll seldom use
addEventListener
.React passes a synthetic event as a parameter of the callBack functions. This synthetic event is similar to a native event passed in the DOM, except that it is compatible with all browsers.
There are two main ways of managing form: controlled and uncontrolled. You are encouraged to use controlled forms.
Controlled forms save the field values in the local state and access the data entered by the user with
onChange
.Controlled forms allow you to filter content or display an error message based on the data entered by the user.
We've reached the end of Part 2. Itâs now time to check your understanding in the quiz. Once youâve done that, we can launch into learning about state with React!