All language subtitles for 098 Accordion - Complete.en_US

And as always, we're going to start by navigating back to our repoll and then, of course, we're looking

for project number four.

So let me open up right now, my integrated terminal.

I'll start with the dev server.

I'll navigate back to the road.

And of course, once I'm in the REACT project and I'm going to go with it online, we're looking for

accordion and then the set folder with drag and drop over here.

And then we're, of course, navigating set folder.

Then we are on NPM install and then AMPM run.

By the way, let me clear the console, so let me hold npm install and rpm start and I would want to

give you a challenge where essentially the steps you would need to take are falling.

First you need to iterate over the list of questions that I have.

I believe in the data.

So if I check out the source, you'll see that I have the data.

So these are the list of questions.

And then I would want you to iterate over them in the averages and then for every item that you have

in a row, display the single question on, then we already have done this before where we have this

toggle and functionality, depending on state value, you're either displaying the text or you're hiding

again.

It's not mandatory, but I would suggest just practicing a bit, at least iterating over the list.

So you display the single question and then if you get stuck on toggling, of course, feel free to

watch the remaining of the video, but at least challenge yourself a little bit where we have already

covered this functionality.

It's just a project.

There's a little bit different where now we're toggling the answer for the question.

Previously, I believe we're working with torse and also we did the same thing and tutorial.

Now, I wouldn't want to start with an ideal where, like I said, I have the data.

Correct.

So data is a list of questions.

As you can see, there's an array again, each and every item is an object.

And I'm here, I have ideas, I have title, I have info, and I have all these values.

I believe I have five questions online in the Objets first hour.

I just want to display my container.

Now it's up to you.

You can set up here a state value in the objects or you can just get it.

That's up to you.

In my case, I used state, but we're not going to change those values.

Also, I want to let you know that if you don't like the background, so if for some real reason you're

not a fan of this awesome background color and of course, navigate the and then change this value from

the purple to wherever you want.

And one last thing that I would want to mention.

The idea again came from the website, the UI design daily.

So if you want to check it out, please do so.

So back to jazz legend.

Set up a basic return with a single question component.

Like I said, it is not really necessary in here, but I'll still set up a stage where I'm going to

go with concert and then questions and then set questions.

Even though we won't use this function.

I'm going to go with you State and I'll just pass in the data.

So the error that I'm getting from my data, Jaspal, the array of questions, I'm as far as the return

would go with mine.

Then we place our container so there with a glass of container inside of the container will go with

Herring three and that is going to be questions and answers about Log-in like so and right next to it,

we're going to have a section with a class of info section.

And by the way, I should have gone to the source of section info and instead of the section, I would

want to iterate over the list of questions.

So I go here with questions, then map, of course, and on each and every item will be represented

with a primer of question.

So that is that object.

And then, of course, I would want to return my single question component.

Now, I do need to add a key here.

So I'm going to go with Kiprop and will pass in question ID.

So the parameter name and then ID because I know that in my array I do have that property, so every

object has that property.

And also let's use that separate operator to pass the rest of the properties as well.

So we go with that.

And then we have the question, so now, of course, once we navigate there, by the way, of course,

the mistake was I didn't close it out.

Let me do that.

And now I can see we have questions and answers about the Log-in and then I have five question component's.

Why?

Because the array has five items, and that's the only return that I have in my question combined.

Now, I also imported some icons, a little bit of repetition where cover that in the previous project.

So we have the icons for a question now inside of the question, of course, now we can access all the

properties from that object and there's not many essential.

There's going to be only two because they are set up as props.

So I know that I have title and of course I have the info now.

I'm going to hold off on that value, even though eventually it's going to be there for talking purposes,

for not let's just worry about our return.

So we're going to go here with article.

Then we'll add here a class name and that class name is going to be questioned.

And that as far as the return, well, let's go with a header here.

And then instead of the header, we're going to have a heading for and then the title.

So whatever is going to be the title.

And eventually we'll also have our toggle button.

So right next to the heading for Let's Go with Button will add a class name of Beaton and eventually

there will be icons here.

But phrenologists b10 let's it we should have the title and then our button and then of course right

below the button and essentially also the header.

I would want to showcase my paragraph.

So in here I go with an info so that looks good.

But of course we would want to have that functionality where only once we click on a button then we

display this text.

And not only that, I also want to change my icons around where if of course I would want to collapse

and then I switch from negative or minus to a plus and then the opposite.

If I would want to display more info and we know how we can toggle things.

So we're going to go.

Here we go.

I'm going to call this show info.

And then set your info info, and that is equal to a year's state and then I'll pass in the fall.

OK, so by default it is going to be false.

And now where I'm working with my paragraph, I wouldn't want to display it right from the get go.

I'll say, you know what, if show info is true, only then I on display my program.

So I'm going to cut it out and copy and paste.

And now of course they will be hidden by default.

Why?

Because this one is false.

So I'll change the channel and of course all of them will be shown again, something we have covered

already multiple times, editorial as well as in the project.

So now, of course, we just need to set up our button where we go with unclick and then we'll pass

in our inline function because I think it's going to be the fastest.

I remember we just wanted to set the new value opposite to the current one.

So we go with our function and that in here we go with exclamation point and we say show info.

So whatever is the value pass and the opposite.

And of course we can also check for the icons.

Now, in this case, I'm going to do the turn operator where if the show info is true, then I'll display

one.

And if it is false, then of course I'll display another one.

So I go showing for my ternary operator.

And then if it is true, if I would want to display the icon, then I'm going to go with minus like

so and then if it is not true and of course I'm going to go with the plus one.

So I have the colon, I go with other icon like so and once I save Noris since showing is false.

Now of course I'm displaying my plus icon.

Then the moment I change around course I also display different icon that you did for the project.

Hopefully you are able to follow along and hopefully you also challenge yourself a little bit where

you iterate over the questions you may be trying to set up state value and all that good stuff.

And I hope to see your next project.