Kinds and Enter Fields In React: The 10 Days of React JS (Day 9)

by birtanpublished on July 3, 2020

[Music]

hello everyone in this lesson we're

going to learn how to work with forms

within react let's jump right into the

action so within this same code pen that

we've been working on we're going to add

a form that lets a user add a new pet to

the list so right above the list right

about here there will be a form with

three fields where you can type a pet's

name species and age now we have a lot

to cover in this lesson and so typing

out a bunch of boilerplate HTML is

probably not the best use of our time so

let me switch tabs in the resources for

this lesson you'll find a link called

copy and paste form starter as you can

see there's nothing new going on in this

code so we're not missing an educational

opportunity by just having you copy and

paste this it's just a function that's

returning a bit of JSX and there's

nothing interesting going on here

so right now pause the video find this

starter link and then from here just

select everything in the JavaScript

column just select all of this into your

clipboard okay and then back in the code

pen that we've been working on together

I want you to paste that in in terms of

where you should paste it in maybe right

below our our app function so just an

brand new function that's not nested in

any other function just paste in your

clipboard

okay now that we've added this add pet

form to our code let's actually leverage

it so back up in our our app function

within our overall JSX

right above the unordered list of pets

let's just add in add pet form just like

that okay now if we check the preview

area cool there's the form now before we

worry about extracting whatever values

the user typed into these fields let's

first just respond to the event of this

form being submitted let me show you

what I mean so let's jump back to the

JSX for that phone

right so within our ad pet form function

and on the opening form tag let's do

this let's add a prop named on submit

and that's an uppercase s for submit

equals and then curly brackets and let's

make up a function name that we can

create in just a few seconds we could

call it anything but let's say candle

submit okay then within this function

but maybe right above the return line we

can just create a function with that

name so function handle submit

parentheses curly brackets now the next

ten seconds have nothing to do with

react and this just has to do with the

way that web browsers and JavaScript

work but within the parentheses for this

function we want to include a parameter

let's call it E which is short for event

essentially whenever you submit a form

in a web browser the web browser's

default behavior is to send that data

off to a new URL or to a new location

but we don't actually want to reload the

page so we want to prevent that default

behavior of the web browser now this

event parameter contains all sorts of

information about the form submit event

that just happened so to prevent that

default behavior we can just say e dot

and then call a method named prevent

default and again this has nothing to do

with react this is just general web

browser JavaScript okay but right below

that prevent default line just does a

test maybe we have an alert that says

thank you for submitting the form

okay now let's test things out so if we

submit this form perfect we see that

alert message at this point we need to

ask ourselves what do we actually want

to do when the user submits this form

well from a react perspective we want to

take the values that they entered and

update whatever state is driving this

list of pets to now also include the

data that was just typed into these

fields to make that happen we actually

need to step back from the form for a

and what we need to do is move our pet

data to live inside the state of our our

app component let me show you what I

mean

so up at the very top of our code not

living within any of our react functions

remember we have this array named pets

and it's just an array of objects right

and this is what's driving that list of

pets well right now do this with me I

want you to select the array so from

this opening square bracket here select

until the closing square bracket and I

want you to cut that into your clipboard

okay and then we can get rid of this

Const pat's equals and we want to move

that data to live within state within

this our app component so up at the very

top of that our app function do this

with me say use state parentheses to

call it and in the parentheses just

paste in your clipboard okay so now

react is responsible for storing this

data but remember we want to be able to

access this again later on so at the

very start of this line say Const and

then square brackets equals inside the

square brackets say pets comma set pets

so ultimately within our app you can

still access the pet data from a

variable of lowercase pets so our pet

list still displays just fine

only now we have this function named set

pets that we can call to update this

piece of state maybe now the bigger

picture is coming into focus so when

someone submits the pet form we want to

take the data that they just typed in

and we just want to push it onto this

array of state data well we're not

actually going to push or mutate this

exact array instead we're just going to

give a new array to react and react can

handle things from there but the idea is

that once we update that state react

will take care of re-rendering this part

of the Dom it won't even need to

re-render any of the lists it will just

ran

the new element that we just added to it

enough talk for now let's put this into

action so let's go find our add pet form

function here it is and remember we set

up handle submit now instead of showing

an annoying alert this is where we would

want to update the state of the list of

pets however we are about to run into

our first real roadblock or challenge in

terms of wrapping our minds around react

so really quick if I scroll back up to

where we set that state right and now we

have this function named set pets that

would allow us to update that state well

we need to recognize that this is only

available from within this function the

our app function at the moment we have

no way of accessing this set pets from

within our add pet form function now

there are many many different ways to

get around this issue in react and we

will learn about different strategies

later on in the course but for now let

me show you the simplest approach around

this within our overall our app function

if we look at our JSX code when we are

rendering the add pet form component we

can just give it a prop of that set pets

function so right on this add pet form

let's just give it a prop of we could

give it any name we want but let's say

set pets and just set it to equal curly

bracket set pets okay now let's go

within this add pet form function and

leverage that so here is add pet form

within the parentheses for that function

we just want to include a props

parameter okay and now check this out

instead of the annoying alert message we

can get rid of that and what we actually

want to do is just call props dot set

pets and now before we worry about

accessing whatever values the user types

in let's first just practice adding a

new pet to our state with fake

hard-coded values for its name species

and age so within the parentheses for

set pets we know that we want the new

value to

based on the previous value so we're

going to give this a function let's use

an es six arrow function so we just need

one parameter let's call it crab for

previous arrow symbol and then we don't

even need curly brackets if we just want

to stay all on one line here and we

don't even need the word return now we

don't want to modify the state directly

we're not going to get into the why

behind that right now it's too big of a

topic for this lesson but essentially in

react you don't want to directly mutate

the state you just want to give react

the new desired value and let react

handle things from there so we can begin

working with the old array only instead

of using a method like push which would

directly change it we can use a method

named con cat can cattle return a

brand-new array instead of modifying the

old array and we just give it a new item

that we want to combine with the old

array so within these parentheses let's

create an object so curly brackets and

now let's just give it fake hard-coded

name species and age just as a test so

let's say name : let's give it a name of

test name comma let's give it a species

: quotes a dog comma let's give it an

age of two comma and for its ID let's

just give it a value of 1 2 3 4 5 6 ok

if you need to pause the video to type

this in with me that's okay let's go

ahead and test this out so in the

preview area let's scroll down we don't

even need to type anything into these

fields just go ahead and submit the form

cool

notice that at the bottom of our pet

list we see that new object that we just

coded so now instead of these fake

hard-coded values let's actually pull

the values that the user has entered

into the fields now this is actually

where a lot of people get confused while

learning react because remember in react

the Dom is never our source of truth so

we are not going to manually read the

values from these fields right directly

from the Dom instead

we're going to listen for the event that

the value of a field changes and then

every single time a field changes its

value we're going to store its newest

value in State so then that way when the

user actually submits the form we don't

need to go retrieve any values from the

Dom we can just work with data that is

already in state I realize that might

sound really confusing but once we see

it in action I think it'll make sense so

right now let's jump into this dive back

into the code with me

and find our function that is named add

pet form within the body of that

function so right about here we want to

create three new pieces of State so type

this in with me let's say Const

square brackets we can name it anything

we want but let's say name comma set

name and set that to equal use state so

we're just going to create one piece of

state for each of the three fields so

the first field was the name the second

field is the species of the pet so let's

say Const square brackets species comma

set species and that should equal use

state okay and then finally let's say

Const square brackets age comma set age

equals use state okay now let's go use

these functions that let us update state

whenever one of the fields changes their

values so if we scroll down to the JSX

for the form here's the first field

right this is the name of the pet so on

this opening input tag we can just add a

prop named on change equals curly

brackets and now we could create a

function with a name and then point

towards that function or we can just

include an anonymous function here why

don't we actually just create an es6

arrow function so we would have exactly

one parameter let's call it a for event

this contains all the information about

the key press event that just happened

arrow symbol and then this is where we

would want to call our set name function

so parentheses to actually call it and

then in these parentheses let's pass it

e dot target dot value so again e is the

event that just occurred target is the

element that just had the event happened

to it this input field and then we're

just grabbing the value from that input

field okay now in order to save a bit of

typing let's just copy and paste this

for the species and age fields so just

select from on change to that closing

curly bracket copy that and then on the

species input right after the input just

paste it in all we need to change is

instead of set name this would be set

species and let's do the same thing for

age so right after the word input paste

it in and change that name to set age

okay at this point we can rest assured

that our state always has the most

updated values from those fields so

check this out let's just find our

candle submit function and instead of

these fake hard-coded values of test

name and dog and age of two well we can

get rid of test name you would actually

just want it to point towards our

variable named name and in modern

JavaScript when the name of your

property is the same thing as the value

that you want it to have you can

actually just get rid of the value in

the colon so you can just say the

property name right because that piece

of State that points towards that latest

value is just name the same thing with

species and age so for species we don't

need the colon and the value of hard

coded dog we can just say species same

thing with age and for ID let's do this

let's say ID colon and then get rid of

the hard-coded 1 through 6 and just say

uppercase date dot now parentheses to

call it that will give it a unique

number each time you create a pet okay

at this point let's test out our form

add new pet let's say test capped

species is cat age is 4 go ahead and

submit that cool there we see it however

what if the user wanted to add

another pet you'll notice that the old

values are still in the fields and it

would be nice if they automatically

cleared out so you didn't have to

manually delete these old values to add

a new pet

so let me show you what we can do within

our handles submit function right after

we add that new pet still within that

function we can just drop down and

remember we already have these

conveniently named functions that let us

update the state so let's just update

them to an empty string like this set

name just an empty string set species

and distrained

set age empty string okay now we just

need to tell those input fields in our

JSX to actually use the state as their

value so we just come down here here's

the input for name we can just give it a

prop or an attribute of value should

equal curly brackets name and then the

species value equals curly bracket

species value equals curly brackets age

okay let's test it out again come down

to the form test dog species is dog age

is to go ahead and submit cool so not

only was it added to our list but notice

these fields were automatically cleared

out for us and that's actually going to

bring this lesson to a close in our next

lesson we'll learn how to add delete

buttons next to each pet so that you can

remove a pet from the list and we'll

also learn how to set things up so that

when you reload the page any new data

that you add it is not lost

now that feature of persisting the data

doesn't have anything to do with react

but we're going to learn about it

because it's a great excuse to learn

about a tool and react named use affect

use affect does not inherently have

anything to do with persisting data use

effect is simply a very useful tool that

can be used in a million different types

of situations and learning how it works

is a huge part of moving forward with

react let's keep things rolling and I

will see you in the next lesson

to get immediate and lifetime access to

the full 15 hour video course you can

find a heavily discounted coupon link in

the description for this video thank you

so much for watching and take care

[Music]

Be the first to comment “Kinds and Enter Fields In React: The 10 Days of React JS (Day 9)”

Your email address will not be published.

There are no comments yet.