Create and Style a List of Data with React

Instructor: [00:00] We are now going to sort the data that will drive our application. React-beautiful-dnd has no opinions about how you should structure your data or manage it. For our purposes, we're going to have a very simple data structure.

[00:17] We are firstly going to have a property called tasks. The tasks object contains the tasks in our system. It uses the task's ID as the key for the lookup of the task object. The task object contains an ID, as well as the content for the task, such as "take out the garbage."

[00:37] We are also going to have a columns object, which we'll use to store the columns in our system. We use the columns object to store the columns in our system. We also use the column ID as the key for looking up the column. This column is our to-do column.

[00:53] Each column has a task IDs array. This array serves two purposes. The first purpose is to indicate ownership. We know that task one is currently inside of column one. The second purpose of the array is to maintain order. Right now, task one appears on the list before task two.

[01:13] We are also going to add another property to the object called column order. This is the property that we will use to record the order of the columns. Right now, we just have one column. I'm adding this here now so that, in future lessons, we're able to add more columns.

[01:30] We just need to export this and return to our index file. Inside of our index file, we can now import our initial data. We're going to use this data as the basis for rendering our application. We're going to set the initial state of our application to be that initial data. It'll be the responsibility of app to render our columns.

[01:56] The column order array stores the order in which we want to render out our columns, and so we're going to map over that in order to render out our columns. Now we need to pull the column out of our state, and we'll also get the tasks associated with that column.

[02:24] Just to check that we've got everything wired up correctly, I'm simply going to return the title of the column. OK, great. We can see over here that we are now rendering out the title of our only column, to-do.

[02:37] We are now going to render out a column component rather than just the title. It is important for us to give a key to the column. Because we're rendering out a list of components, this is how React keeps track of that list. We're also going to pass the column in, as well as the tasks for that column.

[03:09] Now we need to create this column component for us to render out. Firstly, I'm going to import column from...This file doesn't exist yet, so we need to go ahead and create that. For our column component, we're simply going to render out the title again. OK, great.

[03:37] Our new column component is rendering out the column title for the column. At this point, we're going to need to start styling our application. In order to do that, I'm going to add a library called styled-components. Styled-components is a component-based CSS in JS library that I like using.

[04:04] React-beautiful-dnd has no opinions about what styling approach you want to use, whether that's preprocessed styles like Less or Sass, CSS in JS, inline styles, or some other styling mechanism. It's up to you.

[04:18] I'm also going to add a CSS reset in order to improve the visual consistency of our application across browsers. You're welcome to use your own CSS reset or none at all. To add the CSS reset, I'm going to go back to index.js and directly import the reset from here. You will see that our application's visual appearance has changed slightly.

[04:38] We're now going to go back to column. Using the styled import from styled-components, we're able to create elements with styles. We're going to need a container, which is going to wrap our column. We'll make this a div.

[04:52] We're also going to need a title, which we'll make a H3. We're going to have a task list component, and this will be the area in which we render out our tasks. For now, we can leave that as a div.

[05:19] We're now rendering out our column with no additional styles other than the CSS reset that we've added. Let's go ahead and make this look a bit nicer. We're going to add a margin to our container. We're also going to add a border, a border radius.

[05:40] We're now going to apply some padding to our title and to our task list. I'm applying the padding directly to the title and the task list, rather than the container, so that they press up against the edges of the box.

[05:58] The reason I'm doing that is, in the future, I'm going to highlight them when I'm dragging them, and I like the colors to bleed out to the edge. You're welcome to use whatever styling approach or spacing you want to create your own lists.

[06:11] We are now going to make our task list return a list of tasks. We're now rendering out a list of task components, but we haven't created it yet. Let's go ahead and import task from task. We haven't created this file, so let's go ahead and create that.

[06:33] We've now created our task component. For now, let's simply return the task content, so that we know that we're passing through the right data. Great. We can see that we're now listing out the content of the tasks that are being passed into the column.

[06:53] Let's improve the styling of this. We're again going to create a container component and we're going to wrap our task content inside of that. We're now rendering out our list of tasks.

[07:08] Let's make this look a little bit nicer. We're going to give it a border, some internal padding, and we're also going to make each item push the one after it down slightly. We'll also add a border radius, just so it's similar to the column.

[07:34] We are now rendering out our to-do list.