All language subtitles for 007 Outsourcing Concept Items Into a Reusable Component_en

So let's now outsource

these concept items here, into a separate component.

And for that of course,

I wanna outsource this list item code here in the end,

into a separate component.

For that, in the components folder,

we can add another sub folder called concept,

though of course this name as always, is up to you.

And then in there, create a concept.js file,

where I also have my concept function

for this concept component,

which of course must be exported,

to make it available outside of this file.

And then here, I want to return this list item, JSX code.

So I can cut it from here, from app.js,

and move it here into concept.js.

Now, one very important note here,

in theory, we could now create

three different concept components,

one for every core concept that we're outputting here.

But if we would do that,

we would still be duplicating, and replicating code.

And if we ever wanted to delete the paragraph,

we still would have to do that

in three different components.

That's why I'm not building three different components here.

But instead, one reusable component,

which must be configurable, though.

It must be configurable,

so that one and the same component

can output different data.

Data that's always output in the same way,

so that it always has the same shape in the end.

But the different data pieces,

the image, the title, the description,

the values stored under those keys, that will differ.

And that's the idea here with this function component.

So therefore,

it must be configurable, in order to be reusable.

And how do we make it configurable?

With help of props.

So here we can, and should, accept this props argument,

this props parameter,

which will be created and managed automatically by React,

and which will be passed

into this component function by React.

And then with that, here we can, for example,

output props.image, and here props.title.

And here it's also props.title.

And the same as true here for description,

it's props.description.

And with that, we made this component configurable,

and it does now accept an image, a title,

and a description key,

which can and should be set

when that component is being used in JSX code.

Therefore now back in app.js,

we can use this concept component here.

And for it to be usable here, we also must import it.

So here we should import concept

from ./Components/Concept/Concept.

And with that import here added, we can go down,

use the concept component like this,

as a self-closing component here,

because I'm not passing anything

between its opening and closing tabs.

And then here, we can set the image prop, like this,

because in concept, I'm extracting an image prop

So I'm looking for this key,

hence we should provide it here, on this component.

And set these to concepts(0).image.

So we're still accessing that concepts data from this array,

but we're now passing it to our own custom component.

And of course,

we're now going to do the same for the title.

Here, we should access concepts(0).title.

And last but not least, we also wanna do that

for the description of course,

and pass concepts(0).description,

as a value for the description prop.

With that, if I formatted this, the code looks like this.

And now we can easily replace those list items here,

with our own custom component,

and pass the correct data to the props.

So here for concepts(1), on that second item,

and on the third item for concepts(2),

so for the third concepts item.

And with that, we now got this reusable component,

and we are reusing it,

and we are configuring it, with help of props.

And the HTML structure, is now only defined once,

inside of this component,

but it can now easily be reused,

thanks to our custom component.

And I make sure that here I'm accessing concepts(2),

not concepts(3), which would be wrong.

And I saved this again.

I've now got the same website as before,

with those key concepts items,

but now we're building it with help of custom components,

custom reusable components.

And therefore, all three tasks that I gave you

at the beginning of the section, are now solved.