Amazing work, we can display our tour's list now let's work on the toggle functionality, or at the
moment, of course, we're displaying the full info.
However, what I would want to do is to add a button where by default I only display part of the info,
and then if the user chooses to see the full info, he or she presses read more like so.
And then of course we can see the form for how or there's the option of going to default where progress
us on the show was.
So first, we'll start by setting up some kind of straight volume and here I'm going to go and read
more.
Again, that is just my name and of course the function of set and then read more and by default also
equal to Paphos.
So by default is going to be false.
And once I have my stage value now where we have the info, we would need to set up a conditional rendering
where at the moment, yeah, I'm saying I would just want to display the full info.
However, since I have my stage value, what I could do instead is say if the read more is true, then
I would want to display the info.
How?
However, if it is not so right after the column, then I would want to do something else.
Now, since I'll have to add a little bit more functionality, I will need to set up or here the template
strand.
Then I'll set up my expression and we're going to go it in full and then sub string like so.
And of course, that is the function that just gets part of the string and we start with zero, so start
with zero and then comma and then how much text you want to display.
So in my case, I go two hundred.
But of course you can choose your own value.
And then in here, let's just add that.
So again, what is happening right now is we have the state value.
A name is read more and by default it is false.
And that in a paragraph, instead of just displaying the whole info, I'm saying, hey, listen, is
read more true.
So if it is going to be true, then yes, we will display the full info.
However, if the read more is not true, then I'm going to look for info and then I'll run my substring
method because it is a strength.
And I'll just say, you know what, show the two hundred characters instead.
And of course since the all by default is false, that's why we see the short version of the info.
If we set it equal to true, you'll notice that essentially we're back to the previous setup where we
just display the full info.
So that's step number one.
Now, the second thing inside of the paragraph, I would want to set up a button that toggles that volume.
So in here, let's go with a button, then we'll set up right away on click and we'll pass, of course,
the inline function and we'll say set or read more.
And now the interesting thing is, since I would want to toggle the value of read more, I just need
to go with my important and then read more.
And essentially what that means is whatever is going to be a value, I will pass and the opposite.
So if the moment it is true, the first time I click, of course my value will be false.
The next time I click, of course, it's going to turn back from the force to a.
So this is how essentially we're talking.
And as far as the name in my button, well I also want to change it.
Correct.
Because in one case this is going to be read more and than in the other case it's going to be.
Show us.
So here's what we could do.
I could say read more again, I'm checking my state value.
And if it is true, then of course, I know that I'm displaying the full info.
Correct.
So that way I know that you know what I'll display.
Show us inside of the bottom.
How are.
If the value is false, then, of course, I know that the name and a button should be read more so.
And here we go with Read More.
So I'll say it by default, I'll hide the info, meaning not all of it, but at least most of it.
And now I have my read more button.
So once I click the button, then of course I'm changing the state value and then I'm also changing.
Well, what am I displaying on here?
And I think this would be a good use case where we go to a react developer tools just search and see
everything in action.
So I'm looking forward to.
The first one, and of course, these are my props and notice how the value is false.
So the first time I click and of course the value is true.
And then since I set up my conditional rendering, Nevarez, now I'm displaying the full info.
Now, the next time, I'll click on a button.
Now, of course, not only I'll display only part of the text, but also the text inside of the button
will change.
So once I click again, state values false and the button says, Read more and I'm only displaying the
part of the text.