3.2 Start the Sidebar

The app component that we built in our previous lesson didn't do very much, because it's just going to be a container that's gonna hold everything else. Let's work on a more visible component in this lesson, the sidebar. It's easier to build components as pure functions, but this component is not going to be a pure function. It's going to be an actual react class. Now the reason we're doing this is because this component needs to use some of react's lifecycle methods. These methods allow you to perform certain actions at certain points in the lifecycle of the component. For example, we have functions like component will mount or component did mount or should component update. Things like these allow you to control how the component acts as the state as the state of the component changes. Now we won't actually be using any of these lifecycle methods just yet, but we'll get there soon. So let's create our Sidebar component. We can start by saying const Sidebar, and this is going to equal React.createClass. This takes an object, and this object is going to have a render function. So this render function is kind of like our pure functional component, it just returns the JSX that we need. Now the difference here is that we don't get the props as a parameter to render, Iinstead we have a props property on our component object. So, I'm just going to say let props = this.props. Kind of a shortcut, so we don't have to write this top props every single time. Now we can actually return our sidebar. So let's create a div element here, and I'm going to give it a class slidebar in here. Let's create an h2, and we'll just have a label at the top saying All Decks, and then underneath this let's create our own ordered list of decks. And then, inside the unordered list, we will loop over our decks. Now, we get our decks list as one of the properties passed to this component. So, we'll say props.decks.map. This will take two parameters. We'll take the deck, and we also want the index, because we're gonna use the index as the key for our list items. So, in React, whenever you have Sibling elements, for example, number of list items inside of an unordered list. When you have a bunch of sibling elements that are the same element like that they need to have a key, an unique key, so the react can tell them apart. So we will just use I as our key value, and then inside of this will say deck.name. And that will just be the text of the list item for now. Now there's one more thing we want to add to this sidebar, and that is a text box that allows us to add a new deck. However, we only want this to be showing if the adding deck state property is true. And we don't have a reducer for this yet, we haven't added the adding deck property to our state. However, we're gonna get to that soon enough. For now, let's just assume that our side bar receives props.addingDeck. And if that's true then we want to go ahead and display the text box where they can type in the decks name. Now we can kind of take a shortcut here and use the binary and operator. If we say props.addingDeck, if this is true then we'll go ahead and render whatever comes after our double ampersand here. However if this is false, the whole statement will be considered false and nothing will be rendered. So here we can just have an input and for now we'll just give it a react reference called add, and we'll come back to this element a little bit later. But for now we should be able to see this in action. So let's go ahead and render our Sidebar inside of our app component here. So we'll get rid of our previous content inside the app component, and let's render a side bar, and we'll have to give it a Dex property and for now that can just be an empty array. Actually when we put something in there, so we can see something all we need to do is give it a name element, and we'll say Deck 1 and we also need to give our Sidebar a property AddingDeck and for now that can be false. All right, so we should be able to see our side bar now. If we come back to the page you can see that now we have our sidebar showing up on the left here, we have our all decks header and then we have deck 1 showing up. Now our text box does not show up, because addingDecks is false. However, if we come back to where we're rendering the sidebar, and we change addingDeck to true, you can see that now when the page refreshes we have our text box displaying. So, that is our basic sidebar component. Now, right now this component of the sidebar doesn't actually interact with our store or state at all. So that's what we're gonna do in the next lesson. We're going to take the two sides of our application that we've created, our store for managing data, and our react components for displaying data, and we're going to bring them together and begin to see an actual application at work.