All language subtitles for 014 Alternative Ways of Passing & Receiving Handling props_en

So props are a crucial React concept.

Components would not be very useful

if they weren't configurable with help of props.

And therefore, when working with React

and when writing React code,

you will often set props on components

and accept props as input.

Now, there are two things I wanna mention here,

two alternative ways of accepting

or setting props you should be aware of.

And I'll start with an alternative way

of setting props

because the use case we have here

where we have a component

that needs almost all the data

we are working with in this app,

so that needs almost all fields

of that raw data.

That use case is quite common.

And you can then absolutely set up

multiple prop key value pairs.

So define multiple props of different names

and pass your different values through those props.

But an alternative would be

to instead create an expense item

where you just pass one prop

that could be titled expense, for example,

though the name as you learned is up to you.

And instead of passing the individual values

through multiple props,

you could then pass the entire data point.

So the entire object in this array

in this case here as one single prop.

So as a value for one single prop,

the expense prop in this case here,

two expense item.

You could do that as well

instead of passing those individual props.

If you would use this approach here

where you pass one single prop

instead of multiple props,

you, of course, also would have to change

the code inside of the component because now,

you no longer get the title as a prop.

Instead, you only get the expense prop

or whichever name you chose for the prop.

So then here in the receiving component,

you would have to write props.expense.title,

props.expense.date and props.expense.amount.

And of course, now, we would have

to migrate all expense items

to this alternative way of passing data

to the expense item.

Now, I wanna emphasize

that both approaches are fine.

You can pass a single prop,

which contains the entire object

or a multiple props,

which contain the individual values.

This is entirely up to you

because it's your component

but I definitely wanted

to mention this alternative.

With that, I'll delete this example though

and switch back to the approach

I showed you before

because I think it's a bit easier

to understand and read,

especially when you're just getting started with React.

But you could also pass everything

in one data object.

When working with props,

both approaches are fine.

So with that, I'm of course

also updating expense item again

and I'm moving back to the individual props.

Another alternative syntax you could use

when working with props is exclusive

to the receiving component.

There, we're getting this props object

where we're then accessing the different properties.

In this case, date, title, and amount.

Instead of using this approach,

we could also use a feature built-in to JavaScript

and use object destructuring right here

in the parameter list.

This might look strange

but it's regular JavaScript code.

You can use the object destructuring syntax here

where you add opening

and closing curly braces

and where you then refer

to the different properties

of the object you are receiving here,

so of the props object in this case,

to pull these values, buy those keys here

out of that incoming object

and store them in locally available variables

of these titles, of these names here.

With that, the date prop

would be accessed with just date

since we're pulling it out here.

Title would be accessed under just title

and amount would be accessed under just amount.

So here, we're using object destructuring.

This is not some special React syntax

or anything like that.

Instead, it's standard JavaScript syntax

for using object destructuring

right in the function parameter list.

Now, again, I will actually switch back

to the old approach which we had before

where we instead use the .notation

for accessing the different properties.

But I wanted to share this alternative

since you'll also see that

in many React projects

and since you personally also might prefer it.