Creating custom event triggers

- [Teacher] In this chapter, let's start working on making this into a more realistic app. So what I'm going to do is start by adding the useState component here at the top because we're going to useState in this App.js file. And then in here, I'm going to create a variable, so after this name, I'm going to say let, and I'm going to create a variable called memberInfo, and, of course, then I'll have to do a setMemberInfo. And then we will create a use tape version of this. And this one is going to have a null passed into it, so you can pass a null to initialize the value. That means that it's not going to have any value when it starts up, and that is sometimes a pretty useful value for it to have. I'm also going to get rid of some of these components that I'm not really using here, so I'm not going to really use this welcome component, all it's doing is this outputting welcome and then the name. So that's not really something I would use in a real project, and I'll just type this in here, Welcome Stargazers, and let me put that inside a headline. And then I can go to the component and this welcome all it was doing, actually, it's a meet to stargazers. So I'll copy this, and I'll get rid of this welcome. And then I'll go back into App.jsx, and say, Meet to Stargazers right here. I'm also going to get rid of some of these things that I was just doing to show you how things work in jsx. So this is break tag doesn't really need to be there, so I'll just save that. Then I have this whole entire support component that is tracking clicks and changing the headline to have those clicks. I'm not really going to use that either, so we'll clean that up, delete this. Then we'll need to go back into App.js and make sure that we delete it from here. And then, we also need to delete it from this import right here. So this should look a lot simpler now, right? It doesn't have all that other stuff, that's great. So actually, I should get rid of this click to support button. It might need a reload here. Yeah, and then it won't show all that stuff. Sometimes the live reload needs a little bit of a kick in order to get it to work. So let's go ahead and keep going here. All right, this article H group, it's really just putting things in a card. So PCO CSS has all these fantastic little classes that you can use to make things look pretty nice. If you look at the documentation, you can see that in components, there's a bunch of different ways of doing things, and we've been using this card, but I don't really necessarily want to use a card in the homepage, and you could see how to do all these other components here. They're pretty easy to do. We're going to build something like a nav later on, but for right now, I'm going to get rid of this article here. And now, it's going to look a little bit more like a regular page, which I think looks nice. All right, let me go ahead and make this window bigger as well. All right, so now that we have that, let's go ahead and keep on working on displaying something when you click on one of these different stargazers. So to do that, I've got this member info and what I can do is underneath this list cast, I can go ahead and create an expression that just makes sure that this memberInfo exists, and if it doesn't exist, then I can display something. So what I want to display here and I'm just going to do a div for right now. So let's try a div, right, organize this a little bit better, and actually, I am going to use the article and then the H group tag in there, and then I'll put a div in there. So let's grab this div, and we'll put it in here. And in this div, I'm going to use an image, and that's going to have remember my images are in an images folder. So in here, I'll use the ES6 tick marks to look for something in the images folder. And then I'm going to assume that they are the memberInfo, and I need to look for the slug. So the slug is the part of the cast adjacent file that tells me the simpler name of the item. And then I'm going to use the larger version of the image. So this should also be in these curly braces, and then it'll have an svg item at the end. And then this is fine right here, MemberInfo.name. It looks like it needs an extra less than sign right there. Okay, after this, I'm going to do a headline level one, and I'll include the memberInfo.name. And then, in a paragraph, I'll do memberInfo.bio. So in PCO CSS age group just makes things appear together, so by default, it adds a bunch of space between elements. So all age group does is allow you to sort of group things together. All right, so this is good enough for a basic sort of set of styles for right now. And then all I have to do is make sure that I trigger something that allows the member to show. I think this might need to be on the same line. All right, and so what I want to do then is go into my list cast item right here. And then, on list cast, I'm going to expect an event called onChoice. So this is how we do events in react. So we can say, if you trigger an event that I'm going to call onChoice, then what I want to do is I'm going to pass along to this arrow function some information, and then in here I'm going to say setMemberInfo using that info variable. So that list cast is going to create an event that's going to get passed along to the App.js file, and when you pass that along, you're going to pass along certain information from that event, and that event then is going to trigger a setMemberInfo of whatever you pass along. So it's essentially using this setMemberInfo variable to change the value of memberInfo, right? So now we need to go into the list cast and what's going to trigger that. All right, so actually, let's set it up up here. So export default, so this is now going to pass along an event called onChoice. So this is a custom event that we're creating, right? And then, when we scroll down here on this anchor tag, I'm going to track click on any one of these items and then when somebody clicks on one of these items, then what I'll do is using an arrow function, I'm going to trigger that event the custom event called onChoice member. So that's going to pass that event from this click, through the export, into App.js, and once you do that, then memberInfo will actually have a value, and so it's going to display whatever is in here. So let's see if everything worked, and let's try clicking, and I have to make this a little bigger. And if we click on one of these items, if you scroll down, then you'll see that the items are being displayed. So I know it's a little hard to see right now, so let's go ahead and add some styles. Let's go back into App.js. And on this div, I'm going to use a style tag. So you might be asking like, when do I use a style element, and when do I import some CSS? And I think that it's okay if you're doing like a one off type of thing to use this style attribute. Technically, importing a style sheet is a little bit faster, but for things that you're only going to be using once, I like to just use style attributes if I can't. So display, and in here I'll say flex, And I will do gap 1rem here, and I got to put that in quotes, so it's going to complain. And then for this image, I'll do a width of 200 pixels, and now you kind of get to see the text side by side. I think Charmaine's really in, I think that I, obviously, need to put this on top of that. All right, so for that, we are just going to do another H group tag because the way that flex box works, it's trying to put each one of these items next to each other, and that's what I want, but I want the headline and the paragraph to be together. So I'll do an H group here, and that will allow me to put these two things right here. So now the text appears on top, and now I can click on any one of these items, and at least I can see this down here. This is hard to see on this very short sort of page. We're going to fix this by putting this into a model that will make it easier for us to actually see this stuff whenever we click on one of these items.