All right, so we've got our basic structure in place, but can you tell me the first thing that is
a bit off when we look at this setup?
So what could cause issues later down the line as your app gets bigger?
Yeah, we have links.
Yeah, we have social media icons and everything is beautiful.
But the problem is that we are hard coding these values.
And even though it works nicely here, if we work in a single number, what if I would have another
component so you don't have to do it.
This is just going to be for demonstration purposes.
But I'm going to create a sidebar, jayesh and online.
I'm going to create my component.
That is my sidebar.
And in here, I also want to display the links.
So in order to speed this up, we're just going to copy and paste.
That would be a reasonable approach.
Right.
So we have these links so I can just copy them, reach them in a sidebar.
And then, of course, I'm already exporting sidebar.
So the only thing left is to import my sidebar.
And of course, I'll cover that from an on the sidebar and then I can push it wherever I want.
So I'm just going to go with the sidebar.
So technically, this works.
I've got my legs.
Now, the problem is, what if I change the name of my page?
What if I say you're not it's not going to be contact.
It is going to be project.
So go with project.
And maybe I'll also change the URL here as well.
Now, the thing is, it only changes and the first one, correct, second one is still the contact.
So now every time I need to change something, I need to hop around and I need to look for all the instances
that have the links.
So a better approach would be setting this up in some kind of data.
So set this up in one place and then if it changes, then it automatically changes in multiple places.
So all the instances that have the links, they right away change again.
If you just have one number, you probably don't need to do that.
But then keep in mind that as your project grows bigger, it is better to have the data separately.
And then if you have multiple instances of the same data, for example, you would want to display these
links in the sidebar.
You would want to display it in a bar, in the footer or whatever.
Then it's going to sit in one place.
And then if you change it in one place, all the instances will right away be updated.
And I already create a file for us.
So if you navigate to their address, you'll notice, too.
All right.
And here we go with links there and then check it out, each link is an object and not any object and
I have a list.
I just added some ID one, two, three or whatever, and then we have the path again.
Don't worry about this will cover this path once we get to the recruiter.
The moment I fully understand that, it doesn't make much sense.
And then we have the text.
So text, of course, is going to be what is displayed here inside of the link.
So what text we have and then once I've got this right.
So what I could do is just iterate over that array in a bar, in a sidebar, or maybe in the footer.
And then if I change something about those links, I just need to change that in one place.
And then all the instances will be right away updated.
So let's start out.
And by the way, one quick thing before we start implementing that number.
Technically, if you want to, you can iterate over this array here as well and then export the whole
thing.
So in our example, we'll iterate over the links in the number and then if we would want to use it in
a sidebar, of course, we would do that as well.
Just keep in mind that you can even iterate over these links here as well.
Now, I thought that would be a bit of an overkill for this project.
But in general, just remember that you can definitely do that.
So let me navigate to you in a bar.
Now I'm going to get rid of my hard coded ones.
So notice here where I have the list items, I will remove them like so and then we're just going to
iterate all the links I already imported from the data jazz.
This is where it is coming from.
And now what I could do is just go with Halli Malmsbury links.
I'm iterating over links, I use my map and then for every link I would want to return a list item.
Now I know that in my object I'm going to have three properties.
I will have 80 euro and text.
So now of course, I'll give it some kind of name.
I'll say it.
There's a link that references that object.
And then what's the structure of those three things?
Euro and then the text as well.
And that will be equal to miling.
So once I had the structure then then of course it is time for our return.
And like I said, I would want to return a list on them for every link that I have.
I'll add right away key within it since we have the list.
And then instead of this list item, I'm going to go with atrip and then this will point to the URL
that I have in my data, my euro property.
And then lastly, as far as the text, I'm just going to access the text property and then once I save
notice, now I have the same links.
But the cool thing is that if I have multiple instances, what I could do and in this case, yes, I'll
just copy and paste something, just speed it up.
So we've got sidebar and then we copy and paste and now both of them have exactly the same now in here.
Of course, it complains that I didn't import the links, so of course we would need to fix that.
Again, that is just for demonstration.
You don't have to do that.
So let's save.
And now I have both of these instances.
I have the number and I have technically this is called sidebar.
Right.
So let me add some kind of heading for.
So I'm going to go here with a fragment and I'm doing that because of the success that I have in this
container.
It's really irrelevant right now.
I'm going to go with sidebar here so we should see the sidebar.
And of course, I can also see the links.
So what we could do is navigate to the data.
And if I change, I don't know the text for the home, I go random, which you'll notice that in both
cases, home changes to random.
So that's how we can keep all our data in one place.
And then if we need to make some changes, which is changed over here and all the instances are automatically
updated, and you can probably already guess that if we have social one and of course we're doing exactly
the same.
So we have social media link that is my object are going to have the array because I'm going to have
a list, then I have the URL.
So this is where we would want to navigate eventually.
And then we have the icon now for the icon.
Since I'm using react icons, make sure you also import react because this is a component, otherwise
there's going to be an error.
So make sure that not only import icons but also import react and then you set up your own.
Now, of course, you are ready to export, so that's why in the Navar I also have the social media
icon and now instead of hard coding, you can probably already guess that we're going to go with social
map online.
As I'm iterating over, I'm going to call this social and then I can now write a way to structure it
again.
So we're going to go into the neural and the icon that is in my object.
And I would want to get it from social icon.
And as far as the return, we're going to go with the return allai, that key, of course, and then
we pass in the area.
And now it's time for our link.
As far as the future, if we're going to go over the URL and the inside of the link, I'm going to go
with Icon.
So once we save, then, of course we would need to navigate to a bigger screen because otherwise we
won't be able to see.
And once I navigate here, all of these are my icons.
So the same deal.
If I would want to add them here in the sidebar and I think I would need to do is important there,
then iterate over and then if I'll change anything about my icons, for example, the URL, then all
the instances will be updated.