We've got some very basic content on the screen.
Let's now create that accordion component.
Well, then show the accordion component inside of our app component and then start to create that array
of items and pass it down as props into the accordion will then start to render out that list of items
on the screen and just make sure that something is visible.
To get started inside my SIRC directory, I'll make a new folder of components.
Inside there, I'll make a new file of accordion and accordion is a kind of a tricky word to spell.
Make sure you've got two C's in there and it's I o n at the very end.
So accordion, not accordion and not in a like that.
It's an O.
We'll create that file.
Well, then put together a little bit of boilerplate.
So let's get react from react.
All create my accordion components.
And right now.
Just a simple each one as well.
That says accordion.
Well, then, export default accordion.
And I bet you can guess what is going to come next.
We'll go back over to our APT James file.
We will import.
Accordion rom component's.
Accordion.
And then rather than returning and each one going return a div.
And inside of that, I'll place my accordion component.
Well, we just typed out a lot very quickly.
So let's just make sure that everything is working as expected.
Yep, I see.
According on screen, fantastic.
Let's now start to create this items array.
We are going to hardcore this into our app component inside the app component or otherwise inside of
that file.
Going to hand code or manually create an items array.
And every element inside that array is going to an object with a title property and some content.
We're then going to communicate that down into our accordion component as props.
Here's my Abdon James file at the top.
Either inside the components or outside of it.
It does not matter because this is a static array that we're creating that is not going to change over
time.
We'll create a array called items, and then we will give this three different objects, just as we
saw in that diagram.
So each one will have a title, and for the first one, how about we put in something like what is?
Reacts.
And then as some content we can put in something like React is a front and JavaScript framework.
Well, then repeat that twice over the maybe on the second one, you could do something a little bit
more simple, straightforward.
There's just some really kind of simple, silly content here.
So how about why use react?
Recontact we could put in.
React is a favorite.
J.S. Library among engineers.
And then just one more.
How do you use.
I'll give it some content of you use react by creating.
Component's.
Those are items and we're going to want to communicate these down into our accordion components.
So on accordion right here, we'll add in items is items.
Notice that we are communicating this as a prop named items.
So we need to go over to our according component.
We need to receive a prop called items.
We can then loop over it or map it and build out a list of different items to show to the user.
Over inside of accordion J.S., we will receive that list of items.
And then right now, let's just print out the number of items that we received.
So I'll delete the accordion text right there and replace it with some curly braces.
And I'll print out items that length.
We should definitely see three printed out now because we just wrote out three different objects inside
that array.
We'll say this back over and there's the three.
Well, we've got some information being passed down to the next thing to do is map over that list of
items and build up our list as we do so.
However, we're going to start to see that we've got some really ugly, unstyled content being displayed
on the screen.
We should probably also start to think about maybe wiring up a CSX library as well.
Overall, we'll just take a pause right here and tackle the rest of this in just a moment.