Hello, everyone.
Now that we have the rest of the pages working as expected, the reaction out there, it's time to look
at the article.
The problem is that we won't be able to display any single article depending on the other.
For example, if we go to slash article, slash laundry, it shows our article about learning.
And if we go to slash articles, slash education, shows an article about learning Narges, et cetera.
And the way we do it with ReachOut that is by using something called You All Barometer's.
And whether you are a amateur work is that we need to use Poland and the name of the variable like such
as Idy or name for any of this segment of our part.
So we will use a name for our you all.
For example, if we navigate to slash article slash, learn, react.
So value of the parameter name will be learn, react.
So how do we get let me save this file.
So how do we get access to this information inside our article component.
So with the Delta we will pass a called match to our company.
So we need to structure that prop, just match.
Now this match contains some useful information such as Barentu Deverill and whether or not it is exactly
matching the.
But it also contains a property for Farnham's, which is where we find our name Parramatta's.
Now we will pull out our parameter name from Match and that will look like this.
So we need the right forms and the name of the variable name equals to match dot badam start name.
Let me say this.
Fine.
Now let's display the value of name parameter in the heading so your I will display the value of name.
So this is we need to parse this thing and I would write this is the name article.
Let me save this file and now let's go to the browser and let's navigate the URL, which is slash article
slash.
And you're right.
Learn and react and then press.
Enter your it is your as you can notice, it's written, this is the Land React article.
So now you will see the heading displays, the string that we have in this part of the order, and now
we can change it to something like hello.
So let me remove this and.
That's right.
Hello.
And press enter so it will display.
So now we need some content, so we will create a new file inside the page directory.
So let's go to which will still be a and inside the page directly.
I create a new file and then with this article IFN Content Torches and press enter.
So I have created some simple content which you can get before the start, copy and paste.
So this is the dummy text.
I need to copy this.
You will get it before the lecture starts.
OK, and I paste content which let me say, despite all the same content, content and array of javascript
with object with represent the article with the article title which is a spring and the content which
is an array of string.
Each of them is represented as a paragraph of the article.
If you notice, each of the articles has a name property.
This is the unique string that we are going to use to match our you all the parameters.
And then we need to export this article at the bottom of the.
Now we will import this in our article page.
So let's go to Article largest and I'll write import article content from Derg Slash article hyphen
content.
Now our article page component have access whatever name be put into.
Don't you want to know?
What we want to do is to find our articles from our article.
Etty that has the name and the way we do is like this.
So I'll take a const or maybe I can take this on to your article it to article content dot fine.
And your Elbaz article that will be article darte name is equal to the name property that we get from
the You are an Parramatta's.
Let me see if this and finally we will convert this article information into JSH, so we need to change
the heading.
So let me remove this and I'll display the heading as article titled Now just after this or just underneath
this, we will map the context.
So after this I will take this article dot dot map and I will take a paragraph and we need the key also
so that I'll take it as an index.
And I'll take a paragraph and insert a paragraph.
So let me call this an elevator door closes clitorises and you're an adult.
OK, I will add some classes.
So class name equals to Max Ahto leading relaxed for line night and this morning brought on board.
And then I will pass the T as in next.
So he will be OK.
Let me save this fine.
And now let's check it in the browser.
So let's go to the browser and you might see this error.
So the name does not match any of the article in the content, so you will not find hello.
It's like name underreact.
Name is the node, name is my untaught on it, but there is no name as hello.
So it doesn't match.
So it will be an adult.
So we will fix this in a way.
But before that let's try the content which is, which exists in the file.
So long hyphen react.
OK, let me press enter.
So now you will see the content which is related to this article where we have successfully displayed
this articles with the other articles on the act.
But earlier we saw a problem that if I change this, you are two articles and if I press enter, we
will get an ETA to fix this.
We will add a condition.
So let's go with this to go to Article Dages and I will add a condition that if article does not exist,
OK, if that is no article, then we need to return and everyone back with this article does not exist.
Let me say this.
And if I go to the browser, there was some issue.
Okay, I got an error.
So let's remove this one bag.
OK, your.
I missed this segment, OK?
Let me save this, so now it's working fine.
Let's go to the browser and you can see if we type anything, which is not in the content.
Let's say hello.
So you will get article does not exist.
OK, so now instead of later, we will get articles does not exist.
So this is it for this video and I'll see you in the next.