It’s time to start adding some appointments. So, I’ve prepared a bit of data here for you, you can get it from the following gist:

and grab this and work with it. So, I’m going to go and select all this and I’m going to place it in this source folder. So, if I insert a file here, I’m going to call it data. JSON and I paste all of my JSON code in there.

Then we can easily import that into App.JS just by adding an import statement. And when we import it, we want it to have a variable name. So, that will be appointmentList. And it’s going to be imported from data.JSON. So, it’s in the same folder as the current file.

So, I’m going to save that. And then, once we have this information, then we can go ahead and add our list of items. So, we’re going to create an unordered list. And this unordered list, I’m going to add for Tailwind CSS So, this is going to have a class name and it’s going to say, divide, because I want dividers in between the different items vertically. And that you can specify the color, so I’ll do gray 200 here, right.

And then, what we can do is use that appointmentList variable. And we’re going to use JavaScript’s map function to create a temporary variable called appointment for each one of those items as they come in and then we’ll use an arrow function. And this time we’re going to add a parenthesis here, which will be what gets returned from this list and uses the following code in the parenthesis:

Looks like I’m importing a new icon in here as well. So, I’ll make sure that I import it from react-icon library. And save the file, you can see that all those snippets are repeated with that bar in between, or you can see the divider is in between but right now it’s not showing you any of the sort of individual data for each item.

#react #web-development #tailwind-css #css #programming