5.9 Challenge: Users List Component

For the final challenge of this course, we are going to build a list of users where the user component uses the state to store the values and does not show the interest of a user if it is pirates, okay. So that sounds a little vague let me explain a little bit more on what we're doing here. We have a user's component and we have some state and we have a list of users here where they have a name and an interest, and we're gonna have to render a list of that in our side bar here on the left and then in the right when we select the user we wanna show their profile here. Now, in the profile we want to do two things. First of all if their interest is pirates we're gonna show something else instead so we're gonna keep that a secret. And then we also need to store that information about the user in this stage of our component. So we don't just wanna use the props and this is actually a great way for us to not show the interest. Instead of just showing the prompts we can use the props to generate some state and we'll look at how we can use props to generate state. That's kind of the pattern you're going for here. A component receives props but it doesn't use those props exactly, it instead uses them to generate some kind of state. So the example we're looking at here is a little bit contrived, but this is a pattern that I have used in real life applications. So it's probably helpful if you learn this. So let's go ahead and for the last time fork this code pen. And I'm going to show you my solution, so if you want to solve this problem yourself, go ahead and pause the video now. Okay, so let's start in our side bar here, we're gonna create an un-ordered list for our users to be displayed in. And in here we can say, I guess that's this.state.users here. This.state.users and will map over every user here, and we will show a list item here. And we'll have to have a click event there, we also need a key. So, we'll say user.name is our key. And then we can show user.name as a value here and close out our list item. And we need a click function here so that we can set whichever user is selected, so we'll say onClick, and let me break this into multiple lines, so just write this in line here, we can say, onClick and then when this is clicked we'll say this.setState, and will set a selectedUser to be the user that was clicked. Okay. So now we can actually test this quickly by setting this.state.selected user.name. Of course, by default, we're going to get nothing because selecteduser.name is going to be null. So let's just go ahead and have a selectUser appear as an empty object for starters and now of course we get nothing cuz it's undefined but if I click Alice, we get Alice and Andrew and Kara, excellent. Now that we have that selected user being set, you may notice on line 30 here, I've given you one little helpful line here where you can see we're getting the users and the selected user from the state so let's go ahead and make use of that. Instead of saying this.state and then down here we can say if a selected user exists, and let's actually take it out of our initial state here so that it doesn't initially exist. So I've selected user exists then, we will render our user component, and that user will be the selected user. So now we have to create our user component of course. So let's do that up here. So we can say const user = React.createClass and we want to set some initial state here and let's do this right of the butt. We can get our props in here with this .props. So, we have the user from this .props.user, right? And so, let's go ahead and create a constant to you user. And then of course we'll return our state based on that. So we can say the name of course is our user.name and then the interest is going to be well it depends. If user.interest equals pirates then we're going to return, let's just say top secret. Otherwise we will return user.interest. And you know I think we can use destructuring a little better here. Let's change this to name and interest, and this would be this.props.user. There we go. So now here we can just say name because that's the variable, and down here we don't have to say user and interest twice, very nice. Okay. So we're setting this state, perfect. So when we create our new user component, we will set our state based on our props. Now. Remember like I said this is a bit of a contrived example but it kind of shows this pattern of using props to kind of initialize a component, but then using the state to manage those values inside of the component. So let's go ahead and render this and we'll make this really simple. Let's get the same things here. So we have the name. In the interest and we’ll get that from this.state this time and then we can return to div here and we'll have paragraph where we have name and there, name. And then beneath that, we can have Interest and we'll put in there, interest. So now, this should be working. If we click Alice, you can see we have Alice and books. If we click Andrew, we get nothing. If we click Cara, we also get nothing. So the problem here is that when we first select a user, we have selectedUser here gonna be a truthy value. And so we render a new user component. But then when we select a second user, we're not actually rendering a new user component. Instead we're just passing new props to the existing user component, and that's why you get initial state is not rerun because we don't have a new component so we're not initializing the state again. Instead, we need to add another lifecycle method here. And this is going to be componentWillReceiveProps, and that receives the nextProps as a parameter. And so what we can do in here is use these props to create our new state. So I'm just going to copy what we did in getInitialState here and I'll paste it in, and there are just two small changes we need to make. First instead of saying this.props we need to say nextProps.user and then instead of just returning this object we actually need to pass it to this.setState. So now let's see this in action. I click Alice then we get Alice and if we click Andrew, instead we get Andrew and TOP SECRET and then we can switch to Cara and back and forth. Perfect. So this is important to remember, I remember back when I was starting with React, there were many times that I expected a new component to be rendered because the props had changed. But it's important to remember that a lot of the times you would expect that, you actually just have the same component receiving new props. So there's one other thing here. It's unfortunate that we have so much duplicate code here, right? We're kind of doing the exact same thing in these two functions. So what could we do a little bit differently? Well what we could do is write a prep state function here that expects to take a user and return the new state, or we could just say it expects to take props. Some of us had our properties which we will use to create all or maybe just part of our state and so lets just copy our get initial state here. And we can paste that in here and this is pretty much exactly what we need to do except instead of saying this.props we use the props that are passed in as a parameter. And so now prepState returns our new state. So up here in getInitialState we can just return this.prepState and we can pass it this.props and that will return the object that preps state returns for our component will receive props function we can kind of do the same thing except we pass it to this.setState instead of returning it so we can say prep state and we can pass it next props. There we go. All right so now let's see this in action. We can go to Alice we can go to Azure we can go to Cara and our values are updated accordingly. So there you go. The take away from this challenge is that it's important to be cognizant of the life cycle of your react components. Sometimes you will receiving properties, sometimes you may actually be creating new components. Maybe some good homework after this challenge is to reread the React Component Lifecycle Methods, and exactly when they're gonna render. So you can go ahead and check out that documentation. Otherwise, excellent job with this challenge.