What Are Props in React? The 10 Days of React JS (Day 5)

by birtanpublished on July 3, 2020

[Music]

hello everyone in this lesson we're

going to learn about one of the most

important topics in react and that is

props or properties let's dive right in

okay now to set the stage or give

ourselves a bit of context I actually

want to begin in this lesson by talking

about regular traditional old HTML for a

moment

so in regular HTML we can give elements

attributes right like this div has an ID

attribute or we can give an element a

class we can give an a element the href

attribute right to create a link and

that's its value we can give the image

element a source attribute and point

towards an image file well in react when

we create a component we're essentially

creating our own custom element type

only we're not limited to the specific

attributes that HTML allows in react we

can use something called props to give

any attribute or piece of data to any

component we can make up our own new

crazy props or attributes or whatever we

want now to show you what I mean and for

you to see props in action let's give

ourselves a goal let's imagine that we

want to display information about

several different animals or pets on our

web page right maybe for each pet we

want to display their name their species

and their age so let's make it happen

right now I want you to follow along

with me so in the JavaScript column

let's get to work before we adjust our

overall interface let's first create a

new component and name it pet so to do

that we can just create a brand new

function so function and let's name it

uppercase pet just so we're on the same

page so function pet parentheses curly

brackets and for now let's just have it

return a list item element and inside

the list item let's just say this is a

pet okay now we said that we wanted to

have maybe three or

or five pets on our page so now let's

use this component so up at the top in

our our app component

how about right below the time area we

add a bulleted list or unordered list

right so ul for unordered list close

that out in between those opening and

closing tags let's just have maybe three

pets and again that's uppercase P for

pet so that's one let's have a second

one and let's have a third okay and if

we check the preview area there we see

the three pets only we want to display

actual information for each pet like

their name species and age so let's go

down to our pet component function and

let's change the actual text inside the

list item so instead of just this is a

pet let's say blank is a blank and is

blank years old right and then in

reality it would say something like

meows a lot is a cat and is five years

old now before we worry about swapping

out these blanks with actual values

within our reusable component here let's

first go up to the very top right where

we are leveraging the pet component

three times in a row and this is where I

want to show you what a prop is so

remember just like we can add attributes

to a traditional HTML element well in

react we can essentially just add

attributes to our components so right

after pet you can just say name equals

make up a name I'll say meows a lot you

can give it another attribute or I

should stop calling it an attribute this

is a prop or a property so let's give it

a prop of species and say equals quotes

cat and let's give it a prop of age

let's say five okay let's do the same

thing for this next pet so pet let's

give it a name of maybe barks

a lot species of dog let's say age of

two ok and then the 3rd and final pet

for now you same name equals fluffy

maybe the species is rabbit and let's

give it an age of three so these are the

props or properties that we are giving

to this component or passing into this

component so now the question becomes

how do we actually use these pieces of

data within our component well react

could not possibly make this any easier

for us we just go down to our pet

component function and within the

parentheses right after the word pet for

this function we just include a

parameter so let's just say right here

in the parenthesis props okay that's it

now within the body of this function we

can access that data right any of those

attributes or we should call them props

or properties that we just added so

check this out instead of this first

blank this should actually be the pet's

name so do this with me just get rid of

that first link and since we are within

JSX remember JSX is actually just

JavaScript so we just include a pair of

curly brackets to do something dynamic

or run a bit of JavaScript and inside

the curly brackets we just say props

right to work with that incoming data

and then we look inside it with a dot

and we just include the name that we're

interested in right the properties

that's trops dot name and then down in

the preview we see meows la is a blank

barks-a-lot as a blank fluffy is a blank

so let's fill in this second blank this

would be the species so get rid of that

word blanked a pair of curly brackets

and we say props dot species cool it's

looking good we see cat dog and rabbit

down in the preview and then finally for

the Aged get rid of this blank say curly

brackets props dot age cool so there we

see the age values now this is great but

what if instead of just three pets right

instead of just these three what if we

had

300 in that case it would be way too

many to manually list the pet components

over and over here again right and have

to manually feed in the prop values for

each of the 300 pets instead in the real

world when you're working with any

decent amount of data like that you're

usually going to be given an array of

data and a big chunk of data and you

would want to programmatically loop

through the array and do something once

for each item in the collection so that

way even if our array or collection of

pets had 3000 pets we wouldn't have to

list things out like this manually well

that's exactly what we're going to learn

how to do in our very next lesson we're

going to learn how to loop through an

array of items in this case pets within

the context of JSX

right and we want to automatically or

programmatically render the pet

component once for each pet and feed it

the appropriate data and props this

should be a lot of fun to set up let's

keep things rolling and I'll see you

then 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 “What Are Props in React? The 10 Days of React JS (Day 5)”

Your email address will not be published.

There are no comments yet.