Beginner React Tutorial | Building a React Trivia Game

Key Takeaways

in this video I'll show you how to build a beginner SL intermediate react project specifically will'll work on a trivia game I'll give you a demo in just a second but this project is great for anyone just getting started with react looking really to improve their skills get more comfortable with the framework and learn about some best practices like how to structure a slightly larger project how to pick the different components you're going to have and how to control components and pass data down throughout them I'm going to show you a ton of stuff here and teach you a lot about react with that said let's get into a quick demo and then we'll start building this project so I have a demo of the project running in front of me now this is a simple trivia game you can have as many questions as you'd like but for this short demo I've just gone with two now we'll keep track of the number of correct and incorrect questions and give feedback to the user when they get one correct or incorrect so here you can see the first question is what is Tim's middle name in this case my name is JN so I'll go ahead and select that and then I can click next now it says what is Tim's favorite food I'll go with the incorrect answer here which is which is Wings you see that is wrong and it shows me the correct answer here which is sake now when I click next tells me my score and I have the option to play again now I know that this seems uh relatively simple it feels like this should be able to be created in a few minutes but this is actually a really good project to demonstrate how you structure the different components involved in this and how you can flow through different states Pages show the correct answer incorrect answer there's actually a lot here so just trust me you're going to get a ton of value from this project now as well as just is teaching you react I'm going to show you a little bit of typescript don't worry if you've never used it before I'll assume that you have no idea what it is and you'll see how simple it can be to actually implement this in your project and how helpful it will be when your project starts to get a little bit larger so let me pop over to my IDE and we'll start getting this project set up so we're going to get into the setup and start writing some code but I need to mention that in this video I'm going to be using a free tool called codex now this is actually a visual IDE for react that works in companionship with vs code or whatever other editor you want to use now what that means is that we're still going to write this react application exactly as you normally would but we'll just have some more powerful ability to view exactly what's going on in our individual components and to edit them create layouts add Styles and do some of the more difficult things when you're just looking at the code rather than looking at the entire component tree or hierarchy so for example you can see that I've actually have the app open that I built beforehand obviously I built this first just to make sure the concept was good and you can see I'm kind of inside of a Stop Bar component we'll walk through this later on but inside of the Stop Bar component on the left hand side I can see all of the different elements that I have which allows me to very easily find an area that I need to add a style to or fix or move around and if I click on one like the stap our container here I can go and actually add styles to it directly from this editor so that means for any of you that hate CSS just like I do you don't actually need to write this CSS manually you can do it in this cool editor while still writing all of the bulk of your code in an IDE and what will happen is when you make a change here in codex it will directly change that inside of your IDE it will actually add or remove or modify the appropriate lines of code so you're not doing this weird syncing process where you have to write your code in a special way and you're exporting and importing and all the stuff you've probably seen in tools that look similar like similar to this story so what we need to start by doing here is just downloading codex again it's free you can do that from the link in the description and I'm going to initialize the project from codex so it sets up the necessary dependencies and then we'll start actually writing code and creating our components so what I did is just close the Codex app and reopen it just so I get a fresh screen here and what I'm going to do is go ahead and click on new project now once I go to new project I'm going to select on vit or Vite now you might not have seen this before if you're complete beginner but this is kind of the new version of create react app where you're using this as like the the template of your project or like the boiler plate now for the app I'm going to go with react trivia uh and we'll go with tutorial like that and I will just save this on my desktop now this is going to set us up with SC CSS CSS modules and V again we'll discuss this in a second once it loads all right so it's created that template for us now this is like the exact same thing as running a terminal command that would have done that for us as well just happening now in codex and you can see it's prompting me to actually install all of the modules that we need so I'm going to go ahead and click on run now this is just installing the node modules pretty much going to go ahead and click close And now we get the app loaded here in codex and you'll see in a second it will actually render for us the preview of the template so this is the template it gives us where we can actually uh I think we can press on one of these buttons or something and it will count up anyways uh hopefully you got the idea but now what we'll do is we'll open the project in our editor or in our IDE so just like before nothing's changed CH I'm going to open this up in vs code now when I did that in codex it created this on my desktop for you it may have created it somewhere else so find the file location where this was created open up the project in your editor and now we are good to go so what I can do is open up Source here and I'll just kind of go through some of the things that are set up for us because you may not have seen this type of template before then we'll start writing some code so first of all this project is using typescript now we don't need to use typescript but in this project it's going to be help will just to have a few very simple types so if you've never used it before don't worry you're going to learn a bit about it in this video anyways that's why we have these TSX files these are similar to jsx files but TSX is the typescript okay so it's like the typescript equivalent inside of here you'll see a few things are slightly different just because we're using typescript and we have a few Imports for example importing like an app module. sccss now if you've never seen this before this is a special type of CSS file that allows us to do things like Define variables inherit classes and just some more advanced CSS properties we won't really use many of those in this video but it's nice to be familiar with these types of files and how you import them utilize them Etc so we have say index.css this just a normal CSS file but then we have an app. module. sccss file which has all of the Styles directly for the app component so we'll create a new one of these CSS files for each one of our individual components now what I like to start by doing is just cleaning everything up a little bit so I'm actually going to delete everything inside of here I'm going to go to index.css same thing I'm going to delete everything inside of there I'm going to go to main. TSX we can keep all of this this is what's going to be the entry point of our application I'm then going to go to app. TSX and I'm going to delete everything except one of the divs that's inside of here now that's going to have a bunch of uh kind of unused Imports now so I'm going to get rid of all of those I will get rid of this state which means I can get rid of this as well and I'm going to remove the class name reference here from Styles but we will use Styles later on so now we should just have an empty application and if we want to verify that I can go back to codex here and open that up and you can see inside of the app it's completely empty now what we're going to be doing is just writing um some new components and kind of creating a bit of structure here and then I'll show you step by step how we view exactly what we're doing in codex now we also can run this from a Dev server so that means I can go here and I can type npm run Dev in my terminal and this will just run the dev server for me where now I can view this from my browser now we can view this from the browser like we normally would but in codex we're going to get a bit more power right with the ability to actually edit and view right into the tree in the hierarchy which will be a little bit more useful so I'm going to close this for now because we don't really need that this second all right so now that we've got our setup done and we're kind of in the app here we can start writing some code so I want to begin by breaking down what it is exactly we need to do and how we're going to accomplish that so we're creating a trivia game right and for that trivia game you saw that we're going to have a few different components we're going to have multiple questions and we're going to progress through the different questions uh and just allow the user to answer them right pretty straightforward we're going to keep track of their score at the end so the first thing we need to consider is where are we going to store our questions and how are we going to load those now I want to do this in a Json file that means that we'll have an individual file that will load all of the questions from and that way we can add more questions quite easily we could download sets of questions we can make this quite flexible so I'm going to begin by making a Json file now after we make a Json file what we'll need to do is load in those questions we can randomize them or Shuffle if we want to do that then we need to display them to the screen and when we're displaying them to the screen we want to keep track of what question we're on how many we got correct and how many we got incorrect so that's going to involve having that kind of stat bar component there so we can build that out then we're going to have an individual question now each question could be represented as a component then within the question we'll have the question itself and we'll have the possible answers each one of those answers logically makes sense to be a component as well so we'll go through this step by step as we actually build the code but I want you to think to yourself if you were making this from scratch how would you figure out what components you're using and what you want to consider is what is going to be reused what am I rendering multiple times to the screen and what makes sense to be its own kind of isolated and discreet object or in this case component now it's relatively simple for this project you'll see how I structure this and how we build it out and make everything nice and simple and easy to read uh each step of the way so let's start with that Json file we're going to go inside of source here and we're going to make a new file called questions. Json now Json is Javascript object notation so what we can write in here looks pretty much like a JavaScript object so we're going to write a set of curly braces we're going to do a key here here now the key is going to be questions colon and then I'm going to put an array now inside the array we're going to have objects that represent each question so we're going to make an object here and for each question we need to think okay what makes up a question well we have the actual question itself or like the text or the content we then have the possible answers in our case we'll go with four but it could be more if we want to and then we'll have what the correct answer is so we're going to say question as a key is equal to a string and then we'll put the question now you can make this whatever question you want in my case I'll just go with what is my name okay then we're going to have the answers like that this is going to be an array and inside here we're going to put the potential answers now we'll have Tim that'll be the correct answer we'll have John we'll have Susan we'll have maybe Bert and then we're going to go with correct answer idx which stands for index and I'm going to make this equal to zero now what I'm saying there is that the index of the correct answer is zero meaning the first option I have in my answers array if I did correct answer index is one that would indicate that JN is the correct answer so I'm just specifying which of the potential answers here is actually correct and rather than answers we could actually go with choices that might make a bit more sense okay so I'm going to copy this and paste and I'm going to say what is my last name and then we'll change this so that is actually my last name uh we can go with I don't know what's a good last name like Smith um an and I don't know Jose I know those aren't really last names but that's fine we'll just put those there okay so now we have two questions we can add some more later on but for now this is fine for doing the test so what we want to do now is we want to actually be able to load those questions into our app and for now what we could do is just maybe log some of them or just see uh or like display like a simple question on the screen okay so to actually take this questions. Json and import this inside of the app we're going to do the following we're going to say import and I'm going to go with questions from and then we're just going to say questions. Json and we actually need to put a do slash here indicating a relative path meaning from this directory load questions. Json so now we're actually going to have that Json object here the issue is we don't really know what's inside of it when we're kind of hovering over top of it right so you can see like I'm hovering questions and I don't know what keys I have in there what values I have it's going to be difficult to work with so this is where something like typescript comes in and what I can actually do is create a type of my Json file and I can type this kind of variable you'll see in a second how that works and that now allows me to actually get autoc completions for this value so what I can do is go to source and create a new file here called types. TS okay so types. typescript is the extension now I'm going to define a few typescript types and I'll explain how they work and then we'll use them to type that Json file so that we understand what what data story we're actually working with so we're going to create a type we're going to say export type and then we're going to give this a name what do I want to call this going to call this questions and this is going to be equal to a set of cly braces now inside of here what I'm going to do is Define the keys or Define the values or what's actually inside of my object so if I go look at questions we have an object and we have one key here called questions which is equal to an array of questions okay so what I would write here is the following I would say questions which is the name of my key colon and then I'm going to do an array and this is going to be an array of questions now the questions themselves are their own type right a question has a question the choices and the correct answer index so I'm going to create a type for that as well I'm going to say export type question an individual question right and inside of here we're going to say question colon string that means that we have a question key which has the value of type string we then have our choices and this is an array of what an array of strings so we're going to say string and then a set of square brackets and then we have the correct answer index which is a number so what I've done is again defined all of the keys and all of their corresponding values for this type now what I can do is take this array here and I can say question and then put an array sign so that now means for questions I have an array of types or of objects that conform to the type question meaning they each have a question choices and correct answer index field hopefully that makes sense but that's your one minute typescript lesson okay so if I go back to app now what I can actually do is make a variable and I can say const all questions is equal to to questions as and then I can actually put the type that we just wrote which is questions now notice if I hover over questions here it's actually inferring that we need to uh what do you call this import this from do/ types so it's going to automatically import that for me otherwise you could just write import set of curly braces questions set of curly braces there you go uh you now have this in here so now if I hover over all questions you see it as the type questions and it will actually give me autoc completion and allow me to use this more easily throughout my program so now that we have our questions loaded in what we need to keep track of from this main app component is what question we're currently on how many we've got correct and how many we've gotten incorrect now to do that we're going to use State now state is a piece of the react component that can change and anytime the state changes it will automatically render the component for us I'm sure many of you are already familiar with that uh as you probably have some experience with react if you're watching this video what I will do is go to the top of my program here and I'll say import use state from react okay now what I'm going to do is set up a few different pieces of state that we're going to need and we're going to use that in a second so I'm going to say cons and inside of a set of square brackets I'm going to say current question idx okay and then Set current question idx is equal to use State and we're going to put a zero here now really what we're doing here is just keeping track of the index of the current question that we're on when we have zero that means we're on the first question one we're on the second question and we'll Advance this to move to the next question next we're going to have const and we're going to say correct answers and then set correct answers like that is equal to use State and for now this will be zero and then we can copy this and we'll just do the same thing for the incorrect so we'll just change that to in and then set incorrect answers like that okay so now we have the three piece of state that we need now what I want to do is set up the stat bar now the stat bar is going to tell us what question we're on and how many correct and incorrect answers we have and we'll pass to that stat bar these pieces of state so to create the stat bar we're actually going to go in our source folder here we're going to make a new folder and we're going to call this components now it's just nice to organize our components that aren't the main kind of root component like the app one is inside of a folder now what I'm going to do is actually just delete this assets folder because we don't need that anymore so let's get rid of that and then inside of components I'm going to make a new file and I'm going to call this my star. TSX okay now we're going to define the St bar component so we're going to say function St bar like that uh and this is equal to a function and this is going to return for right now simply a div now what I like to start with when I write my functions and actually let me just go down here and say export default St bar if you're unfamiliar with that this is making it so St bar is available outside of this individual typescript file but inside of here uh what I want to start by doing is defining the props that we need to pass to this component now the props are pretty much the variables or the input to the component right so in this case we want the kind of current question so yeah we want like what question we're on we need the total number of questions and then the correct and the incorrect questions so what I'm going to do is Define a type here in typescript and I'm going to say type props is equal to this and I'm going to say current question and this is going to be a number I'm going to say total questions and this is going to be a number I'm going to say correct this will be a number and then I'm going to say Incorrect and this will be a number okay and then I'm going to go to stat bar here and I'm going to say props colon and then props like that which now means I can access all three of these values from this props variable now what we'll do uh actually I don't think I need to do anything at the top here is inside the div we'll just render inside of paragraph tags the three pieces of information that we want and then I'll actually show you how inside of uh codex we can go and create the correct styling for this so I'm going to go inside of paragraph tag one and I'm going to put kind of some jsx syntax here where I say question colon then this is going to be the current question so Props current question and then divided by or out of and then I'm going to do another set of braces here and then props do total questions so what I'm kind of displaying here is okay you're on question one out of five or one out of four or whatever right so I'm taking the data past in here and displaying that now down here I'm going to say correct colon and then this is going to be props doc correct and then we're going to do the same down here for incorrect okay incorrect props do incorrect okay so now we have a stat bar now what I can do is go to my app and I can render my St bar inside of here so I'm just going to say St bar like that notice it's going to automatically import that for me and then I can go and write the props now the props for this are the following and if we don't know what they are we can actually hover over top of this it will tell us what we're missing because we're using typescript so I'm going to say the current question is equal to and this is going to be the current if we can get out of this question index + one the reason I'm adding one is I want to be displaying question one when we're on the zeroth index which is the first question so we have zero indexing here so we just have to add one to that so we get the correct uh representation of the question then we're going to say the total questions is equal to and this is going to be all questions do questions because remember that this type here has the field questions which is an array so we're accessing questions getting the length of that array and that's the total number of questions that we have so go back here okay so that's total questions and this is going to be do length we are then going to say correct is equal to the correct answers and incorrect is equal to the incorrect answers okay so that is our stat bar now if we want to view the stat bar we can go here to codex uh let's just reload this here okay and you can actually see that we're getting this information showing up on the screen so it says questions correct and incorrect now one cool thing in codex is that we can view all the individual components that have so that we can directly edit them so if I go down here it says scan for components now if I press that it's going to scan the app and it will actually find that we have this stat bar component now what I can do is create something known as a board now a board is a place that I can test the component and view different values and see how it responds uh and just kind of yeah mess with the component in a sense so if I create a new board here I can call this whatever I want in this case we'll just call it stat bar you'll see that now it will actually give us our component in isolation so notice how we don't have any values being passed to it like we did when we have the app because now we're just viewing this component in isolation so if I want to can zoom in here so let me make this 200% just so it's a little bit larger and if I actually bring up from the bottom of the screen here you can see that we have code and we have star. board. TSX now this is a codex file and notice it's rendering the St bar here without any props now what I can do is I can pass the props that I want to test and view inside of this board now that's not going to affect my source code it's not going to change anything inside of there but it's going to give me a place where I can view certain States or kind of properties or variants of my component I'm hoping that makes a bit of sense but if I go to St bar here and I go to uh and I add a prop sorry so what are the props that we had for St bar we had uh total questions so I can say total questions is equal to let's put this inside of there one uh let's say the current question is equal to two and notice this uh kind of updates in livetime now that doesn't make sense because it's more questions or the current questions greater than the number of questions we have but then I can say correct is equal to one and incorrect is equal to zero okay so now we get a version of this now what I want to do is I want to style this and get this in the correct layout so what I can do is select on this it's going to show my properties but I can go here to the style Tab and I can actually add Styles and selectors to this now it's not happening from the board here I have to go and click on edit component when I do that now it gives me the actual source code for this component so now I'm not editing the board which is where we kind of mess around with it I'm editing the actual code so here if I click on this div right I can go to where it says selectors I can add a style so I'm just going to make a new class here that I want to apply to this I'm going to call this the stat container okay if we can type that correctly and I'm going to click on create class now when I do that with stack container it's going to tell me where it's creating it in this case star. module. sccss this is a new file it will create for me automatically I'm going to go ahead and press create and now we have this class that you can see has automat automatically been applied to our um what do you call it container and if I go here notice inside of St bar that it's actually changed inside of vs code okay so let's go back two codu and now let's start styling this component so first of all I want to have this in a horizontal layout which means I need my Flex to be in the row Direction so how do I do that I got to see all the little buttons that we have here we have block inline block inline Flex so I'm going to press on Flex here for the layout that's going to give me a flex row now you can choose the direction I'm going to keep this as horizontal and we have options like wrapping aligning ET Etc so what I would like to do is I would like to add some gap between my different components here so I can add a gap say of 10 pixels and now they're a little bit more spaced out now what I also want to do is I want to create kind of a container around this with some padding and a background color so I got to find where this is there's some padding so I'm going to go to padding and I'm going to add 10 pixels there okay so it's getting a little bit larger we can manually adjust the size if we want to do that and we can go to things like order Corners background that's what I want so for background I'm going to select kind of like a dark gray here maybe a little bit lighter what do we actually want let's go with like a dark dark gray and then we can go to the text color so I got to find where that is here you go font okay select the color and we'll go with white okay so let's make that more white and if we want we can change the font family let's see how that looks okay actually kind of like that that's nice and if we want we can add some borders so uh if I want to do Corners I can say what is this like 10 pixels and now this will actually add rounded Corners we can't see it the way that we have it displayed right now but we will see that when we have it rendered in the larger uh app okay so you can see that I just styled all of that without actually having to use uh regular CSS I can just press all the buttons on the side which for me is like the most valuable part of this tool now if I go back to home here and we go to app uh this should update in a second you can see this is updated and that's displayed now I'm not sure if the rounded Corners are working uh I might just be using the wrong properties but we can do this manually if we want so if we go to stb bar. module. CSS yeah the Border radius one pixel oh it's cuz I didn't add 10 okay so that's why so border radius 10 pixels and that should make it a little bit larger for me okay so there you go that is our St bar now that we have the St bar we want to start displaying our questions so we're going to create a new component for the questions let's go ahead and do that so new component here and call this question. TSX now let's make another function and we'll call this question okay and we're going to say export default question all right and actually I'm going to call this question comp the reason for that is we have a type called question and it's going to mess up a little bit if we have uh question and question as like duplicated names right so I'm just going to name this question comp for component I'm going to say type props is equal to and then we'll create the props for our question all right so for our question we need to know first of all what the actual question is so I'm going to go here and say question colon question and I'm going to import that from my types because we're going to pass an individual question which contains the question the choices and the correct answer index now what we're also going to need here is a function to call to indicate to the app when we we've Advanced to the next question and if we got the question correct or incorrect you'll see what I mean here in a second but I'm going to say uh on should we go on press I'm going to say on submit okay and this is going to be a function that is parenthesis and then this is going to be equal sign and then what do you call this here the greater than sign and then void this is the type signature for just a function that doesn't return any value and we're going to take in a parameter here called correct which is a Boolean so what I just did is type here the parameter of my function if you haven't seen this in typescript and I'm saying okay we're going to pass a function to onsubmit as a prop and we're going to call this function when we submit the question so that the main app knows to advance us to the next question and to tell us if we got it correct or incorrect you'll see how this works in just a second now I'm going to go to here and I'm going to say props props like that and we're going to start writing the jsx for our question and styling it so what I'm going to do here is simply return a div inside of the div I'm going to have an H3 tag and I'm just going to render what the question is so I'm going to say props do question. question and then we're actually going to render here another component which is going to be the answers now we haven't ridden this component yet but the reason I'm writing this is we're going to handle all of those different answers um from that component not from the question component directly so now I'm going to make another component and I'm going to call this answers. TSX okay we're going to say function answers like that okay we're going to export this so export default answers we're going to create our props so we're going to say type props is equal to this now for the props just to make it simple we can actually just take the question directly so we can say question and then question like that and then we also need to have and on submit like that and this is going to be the same function we're going to say correct Boolean colon equal void like that because this is where we'll actually handle the logic for indicating whether we got a question correct or incorrect there's a few other ways we could set this up but I want to show you how we can pass data down from multiple components and you'll see what I mean as we start going so let's say props like this props okay now inside of here uh what do we need to do well we need to return some information about our answers so we're going to say return div and we're going to Loop through all of the potential answers we have we're going to display those uh and then we're going to set up some kind of on presses so like when you actually press on the answer it will call this function and it will either have correct or incorrect depending on the answer you selected so what we'll do here is we'll actually set up a map and we will say props do question. choices do map Now map is going to iterate over all of our choices for map app I'm going to take in my choice and the index of that choice because having the index will allow us to know if the choice is correct or not and we're going to say colon equal to and then we're going to return actually an answer component this will be another component that we're going to make so let's make that component I know we have a few here but uh we'll go through them in a second so we're going to say answer. TSX now we're going to make the answer component and we almost have all the components now this is done so we're going to say function answer like that now we're going to say export default answer okay from answer we got to Define our props so we're going to say type props like that now for this we are going to have an on press okay and this doesn't actually need to take anything it can just be a void so this is just the function we're going to call when we press this answer because this will be a button that we can select we then are going to have another value here which is going to be the text so this just be the text that we're going to be displaying and then lastly we're also going to have the color and this is going to be question mark equal to a string now when you put a question mark here in typescript that means this is optional now the reason I'm passing color is we need to know if we should be displaying this as like a normal kind of white text where we haven't pressed anything yet or red or green depending on if we've answered this correctly or incorrectly right so like if I answer we're going to display uh what the correct answer is in green and the incorrect answer is in Red so we need to know that in this answer component so we're going to go here and say props props like that and we are going to return our answer so we're going to say return like this and I think all we actually need here is a button so we'll say button and then inside the button we will have the text of props do text and we'll simply have the onclick equal to the props Doon press and that means when we press the button uh it will press this function or call that function and then we'll adjust the color in just one second in fact what we can do for the color is we can say style is equal to and then I'm going to put a set of uh kind of empty braces here and I'm going to say color question mark so actually this is props do color question mark and then we're going to go inside of here we're going to say color colon props docolor else we're just going to have an empty object now it might be a little bit clear if I put this in a variable so let's just say const style is equal to this and then we'll replace this with the style variable now what I'm doing is writing a tary if statement what that means is if we have a color provided to us so if you actually pass some string value here then we are going to create an object that has color colon prop. color which is a style attribute we're going to apply to this button otherwise we're just going to have nothing for the style meaning we're not going to make any changes at all now while I'm at it I'm actually thinking that I need to change this slightly I'm going to take style equals style here and I'm actually going to write a span and apply this to the span tag the reason I need to do this is I just want the color to affect the text I don't want it to affect the color of the button so I need to just wrap the text directly which is inside of the button now I'm also going to add one more prop here that I forgot about which is disabled we should spell that correctly because once we have answered the question we don't want to be able to press the button again so we're going to say disabled question mark colon and then this is going to be a Boolean and I'm going to go here to my button I'm going to say disabled question mark Or Not question mark sorry is equal to props do disabled okay so now we have our answer component this one is actually finished and if we want to view the answer component we can go to codex and just quickly have a look at it so let's just reload this it's just cuz we have some imports that weren't working let's rescan our components here you should see now that we get answer answers Etc if we go to answer we can create a board so let's make a board and call this answer red okay now let's zoom in on this a little bit all right here we go this is our answer notice we have some values we can pass in here so for the text I'm just going to go with Timothy which is actually my full name for the color will go with red notice that now creates red and then if we made it disabled it would actually disable the button so we can't press on it okay so that's one instance of the button that we can have a look at here now if we wanted to we could create another board for this button so I say new board and then answer green for example and now I can do the same thing so zoom in select my button if I can scroll over here okay so select that text Timothy spelled correctly and the color of green now again that doesn't actually affect my component in the code it just gives me a way to be able to view the different states of my button okay so now that we have that uh we can do a little bit of styling and we can actually display those answers so if we go to answers here we have this answer component and you can see that we need to take in the text and a few other things so first of all let's import this so I can go here and import this from slans now we're going to say the text is equal to the choice dot actually just the choice sorry that's all that needs to be then we're going to say the onpress is equal to and this is going to be a function that we're going to write now this is going to be a little bit more complex logic here but notice what I just did is I changed this so now we have these curly braces inside of this map and I'm just going to explicitly return answer now before it was implied that it was return because I didn't have the braces I just had parentheses es now since I have parentheses this is essentially acting as an inline function anyways for this function I'm going to write the on press function that we're going to call when we press on this answer now what's going to happen is whenever we press on the answer we need to take that data and pass that up right we need to give that to the parent component so it knows if we got it correct or if we got it incorrect right so we have answers but then from answers we have question and then from question we have the app component now all of these components need to pass the data up the way we do that is with something known as function callbacks which is what I'm using here in the props I'm hoping that makes sense but what I'll do here on the onpress is I will call this function that function will then be kind of represented here inside of the question and then we'll use that to then call the app uh here and tell us if we got it correct incorrect Etc okay so what does this uh need to do well first of all when we press on an answer we need to make it so that we can't press on any other answers now that means that we need to have a piece of state that tells us whether or not we've already selected an answer so I'm going to go up here and I'm going to say import use state from react okay and I'm going to make a piece of State here that essentially tells me if we've already answered the question or not now the way I can do that is I can just say const we can go with something like show Answer set show answer is equal to use State and we're going to go with false so now I'm going to write the onpress function so I'm going to say const on press is equal to an arrow function this Arrow function is going to take an index which is a number and we're going to do this we're going to say set show Answer equal to true because as soon as you press on any of the answers we want to display what the correct answer actually is and then we're going to say the following we're going to say props do onsubmit but then what we need to do is we need to indicate whether or not we got this question correct now we only got it correct if the index of the answer we pressed on is the same index as the uh what do you call it the correct answer from our question okay so we're going to say if the props do question. correct answer index is equal to this index then we got a correct otherwise it's not correct so this condition will be true or false which will then tell the question that we answered this correctly or we answered it incorrectly hoping that's making a bit of sense but what we'll do now is inside of the onpress we're actually going to write a function and this function is going to call the onpress function and pass the index so what we're doing is we're saying okay well as soon as we press the answer we want it to call some function this function is actually going to call the onpress function that we have written here and it's going to pass the index of whatever the answer is that we clicked on so that way we don't have to keep track of the index inside ins of the answer we just have that inside of this uh what do you call component okay so that Maps out all of our different questions now what we'll do to go a step further here is we'll say okay well if we're displaying the answer then we want to be telling the answer to show us red or green right if we're displaying it so what we can do to do that is we can say let color equal an empty string okay we then can write an if statement and we can say if show answer uh and actually we can do it like this we can say if show answer and props dot question. correct answer index is equal to the index then we're going to say the color is equal to Green okay now otherwise we'll say else if show Answer like this then the color is equal to Red now we'll keep going here in a second but what I'm saying is okay if we're showing the answer right right and the answer is correct so the one that we're displaying here if this is actually the correct answer then we're going to set the color equal to Green because it's right now if we're showing the answer and this wasn't the case so that was false then we're going to make the color red hopefully that's clear so here we can go and say color is equal to and we can just pass color and if none of these are true the color will just be an empty string so nothing will change now we also want to say disabled now disabled is going to be equal to show answer so if we are showing the answer we're going to disable the buttons so you can no longer press them so actually before we go back to codex I'm just going to go to app and I'm just going to render my question component so I'm going to say question comp like that and I'm going to say the question is equal to and this is going to be all questions do questions at the current question index and then we're going to say on submit is equal to and this is just going to be an empty function for right now uh that we'll fill in later so if I save that and I go back to codex here okay you can see let's close that and go to app if we view app here it's saying what is my name now for some reason it's not showing the answers but this is actually where codex can come in handy if I click on this now and I start going into the tree I can view all the different components that I have so I'm inside of the question component I have an expression and I'm just seeing what is my name which is telling me for some reason it's not actually displaying that aners component so let's go back to questions and you can see that's because we don't have answers here so that's why it's not showing up because I didn't render it here so let's render it here by doing answers like that we can go ahead and import that from do/ anwers and if I hover on this we need the question and the on submit so we're going to say question is equal to props do question and the onsubmit is going to be equal to the props do onsubmit like that okay okay so now if we go back to codex we should see that we are getting the different options right here and we are we're getting our four different buttons now we can test out their state in a second but for now let's go back here let's uh I'm not sure why we're getting an error there what's the log each child in list should have a unique key property okay so let's actually fix that first story so go here to answers now whenever we have this map here we have to add a key property to our different objects so I'm just going to say key is equal to idx and that's going to fix that error that we were seeing go back to codex here okay now we're no longer getting that error and what I want to do is I want to style my question component so I can go here go to my question component we can view that inside of here or we can view it directly inside of a board I think viewing it in here is fine for right now let's go into answers uh and let's style each individual answer and then let's lay them out in a 2X two layout all right so I'm going to start by actually styling the container now the container is going to be this div that includes my different answers now I want to make this a flex box so I'm going to go here and I'm going to add a style the style I add will be choices like that we'll create that inside of a new scss module okay and let's make the layout so let's select Flex horizontal and how do we want to align items uh we'll go Center and then justify and I want this to be actually is this correct here so for a line items that's fine Center Place items Center Place content I want to do that space between in this direction so I'm going to click on that one and now you can see it kind of aligns them space between the issue is I actually want these to be in a 2X two configuration now I think the way I need to do that is by adding a flex wrap I don't remember how how to do that exactly here all right so actually it's right here Flex wrap wrap so I'm going to click on wrap now if I go into my individual answer so I go to say the answer component right here and I go to the button I can now add a style on here and set a width and then I should get that 2x two configuration I'm looking for so I'm going to make a new class here create class I'm going to call this answer okay now for this we just want to set the width so we're going to go over to where do we have width right here and we're going to go 45% so I can go to pixel and just select percent there and now notice it brings us in that 2x two configuration uh with actually a 10% uh what do you call this here kind of pad we want it to be a little bit less I can do like 47.5% and then that gets a little bit larger okay so that's good for that sizing now let's actually just make the buttons look a little bit nicer so let's add a bit of padding so where's my padding padd padding padding padding is right here let's add 10 pixels of padding to our buttons let's add some background color so background I want that to be a similar gray color which I think is going to be like this one here okay that's better I want to change my text so let's go to text and color and let's make that white okay we can do that same font family which is this one weight we can actually make this bold I think those look a little bit nicer let's add a border so for the Border we go solid do I want it black let's go with a white pixel border like that for the corners let's go with 10 pixels of rounding okay now let's go back to our answers which we can do right here uh let's go to our div and let's add a bit of Gap so in the the column Direction I'm going to add 10 Gap that's a little bit nicer I don't know if we need a background color for that I think we can just add a background color to the whole screen and now our buttons are looking a bit nicer now if I want I can click on one answer here let's edit this component so let's go to the button and I can add actually states to this so you see where it says States I can click on element state I'm going to go to focus and now I'm editing the focus state so if I go to focus I can actually just change the Border color which is what I'm going to do so for the Border I'm going to change the color to be like a blue color just so it's kind of clear that we're hovering on it and then that should be good now I think I can preview this and notice when I hover over it or actually it's cuz it's in the focus state right now let's not no not active just focus uh okay I'm not sure exactly how to preview that state change I might need to do it from a board but I think you guys get the idea right when we hover on it now since I just added that Focus State uh it should actually show us that kind of blue outline all right so last thing here let's adjust this name so if we go back here to the H3 you can see this text is a little wonky so let's go H3 let's go to style let's add a class here let call this question okay create that now for question we'll just go and change the font so that it matches the other one and and we'll make the color be white now you're not going to be able to read it right away but we will set the background color of the entire screen in a second so now we can go back to app okay just go to the div and we'll change the background color now so for the background color We'll add a style press on create class okay go ahead and make that now we will change the background so that is going to be here let's make this like I don't know I don't know what color we want this to be let's go with like a more gray maybe you guys can see I'm struggling here with with selecting the colors you you guys can adjust this if you want but you get the idea that's what we'll go with for now I want to add a bit of padding in here so let's go to padding 10 pixels I did not mean to have a one pixel width so let's just make that back to Auto uh and there you go now we have a nice little container and most of the styling is done okay we're getting close to being finished here guys let's close that we do have some more logic to write though uh before we can wrap this up all right so actually most of the stuff from our answers questions Stop Bar those are done a lot of the logic now is going to happen inside of apps you can see that we're rendering the question component and then inside of question if I go here we have the onsubmit right we're passing that to answers from answers we uh have this onpress call whenever we press one of the answers which then calls the onsubmit which then if we go back calls this onsubmit which then in turn will call whatever function we pass here to onsubmit so that's what I want to write now because what I want to do is once we submit I want to update whether we got correct incorrect Etc and then I want to allow the user to advance to the next question so that's going to involve displaying a button and then that button will say you know move to the next question so what we'll have here is another piece of State we're going to say const waiting to advance we're going to say set waiting to advance is equal to you State and this is going to be false now I'm going to have a const on submit okay this going to be equal to a function and this is going to say correct and this is going to be a Boolean now what we're going to do here is we're going to say if correct then we're going to say set correct answers and this is going to be the correct answer is + one else we're going to say set incorrect answers and this is going to be the incorrect answers plus one we're then going to say set waiting to advance to be true okay so that's going to put us in a mode where now we are well waiting to advance all right now that we are waiting to advance what we need to do is have another button that we will display underneath here that says next so I'm going to say here if waiting to advance so waiting to advance and then we're just going to have a little button we're going to say button like that and this is going to say next question dot dot dot and on this button we're going to have an on click is equal to and we're going to call a function now the function we're going to have here is const Advance okay so we're going to call the advanced function so we'll just write Advance like that and now for the advanced function we're going to say set waiting to advance false because now we're no longer waiting to advance because we're advancing and we're going to increment the current question index so we're going to say set the so Set current question index equal to the current question index + one now we do need to check to see if we are currently at the last question but for now this should allow us to advance through the questions so what we can do is just take this on submit function and pass that here okay and now we should actually be able to run our app uh and see all of this working properly now this next button is going to look a j we can style that in a second but I just want to see if this is working so let's go here and type npm run Dev that's going to run the development server for us let's open this up here in our browser so let me pop that open wrong window it is over here you can see that uh it looks a little bit weird so I got to fix this Let me refresh this here uh I messed something up with the states but anyways says question 102 correct zero incorrect zero if I click on Tim boom it says 102 correct one next question brings me next question and then we got to fix this because it's still highlighting when it shouldn't be highlighting okay so a few things to fix here but you can see that this is uh kind of working and we can also adjust the width and the size of this if we wanted to do that okay so we're back here inside of vs code first let's fix that issue where it was still highlighting them when um we moved to the next question the way we can do that is we can go to answers here and we can import a use effect now what we need to do is just reset this state here so show answer anytime we get another question so this is actually really easy to do we can just type use effect pass a function and then inside of this set of parentheses here this is the dependency array this means that use effect this function is going to run anytime whatever we have inside of here changes so we're just going to say props Dot and this is going to be question so anytime we get a new question we're going to say set show Answer equal to false and that will um no longer show the answer for the next set of choices that we display okay so that's that so now if we go back to our Dev server so let's open this up here you'll see that if we go so Tim next question it gets reset okay so that's working we just need to fix our blue Highlight uh and then we need to have that kind of finished screen because here if I click next question you'll see the app crashes so we'll handle that in a second okay all right so let's open up codex let's go here into one of our answers we can go and press press edit component now when I click on this here if I go to this we'll go and look at our border and yes it looks like we have one pixel Border in the non-hover state so let me remove that let's go back here to States let's go hover and now I need to actually press this button which I forgot to do before so I'm going to create that now you can see the selector changed so now if I scroll down I can add a one pixel border and that should be good so if we go back here and we go back to this when I hover it you can see that we add that one pixel border now if we don't want it to move around and kind of jump like this the way we can fix that is we can go here we can get out of the hover state so just go to how do I change this answer and we can just add a one pixel border that is transparent or a different color so if I add that and how do I make this a different color let's make it just black okay so now if we go back you can see that we're not having it jump around because we're not changing the sizes okay so last thing to do is handle what happens when we end so let's write that the way we're going to do that is we're just going to have a component that will kind of be like our reset component so we can go to components and we can say reset. TSX with a capital R we'll say function reset like that okay we'll say export default reset and we'll type our props so let's say type props equal this we're going to say total questions number and then correct questions like that is a number we're going to take these in as props so Props props like that and we're just going to return uh a simple div that will display how we did now we also need to have a button so we're going to say on press okay and this will be a void and this will just call a function that will reset the game for us so we're going to have a div on the div we're going to have an onclick this is going to be the on press from our props we're then going to display an H1 that says you scored and we're going to take our props do correct questions and divide that by the props do total questions put that inside of a set of parenthesis and then multiply that by 100 and then put a percent so that we get the percentage that we scored we are then going to have a button or actually sorry so the on click needs to be on the button not the div and the button we'll say press to try again okay so that is our reset component fairly straightforward so what we'll kind of say here is if we have answered all of the questions already we have none left we're going to display that reset component and then when we press that reset button function it's actually going to reset the current question index to be back to zero and reset all of the different props that we need so what we can do here is say const actually not const we can just say if the current question index is greater than or equal to the all questions. questions. length then we will simply return the reset component now when we uh do this we need to pass our values so we're going to say total questions is equal to all questions do questions. length and notice that I get all of that autocomplete because I'm using typescript and then we're going to say the correct questions is equal to the correct answers so I probably should have named them the same thing but that's fine and then we're going to say onpress is equal to and we're going to write a reset function so we're going to say con reset is equal to this and we'll just pass that reset function and then inside of reset we will reset all of our state okay so we're going to say set the current question index back equal to zero we're going to say set the correct answers equal to zero we're going to say set the incorrect answers equal to zero and I think that's actually all we need if we reset those three we should be good and just for good measure we'll just say set waiting to advance equal to false as well just to make sure that that is not messed up okay let's give this a shot we'll do some final styling after this but if we refresh here okay let's answer Tim next question Smith next question you scored 50% press and try again go ahead and we can run that fantastic okay so last thing I want to do is just set a background color for the entire screen I want to style that next button and then I want to style that reset page and then we'll be done so to set the background color for the entire screen I'm just going to go to my index.css and I'm just going to say body or actually I'm going to say HTML comma body so I'm going to do this for both of them and I'm going to say the background color is equal to just a gray now if I do that let's go here you can see we have two different color Grays that's fine for now but at least the whole thing is gray okay now for the rest of this we can style it with uh codex so to do that we can go over to our app and you'll see that if I click into the app here notice that in this board we're not displaying the um the next button right because we need a certain condition to be true to be able to display that so if I go and view the code down here right app. TSX you'll see that if I kind of expand this we have this condition for the button but we're not seeing it on the screen here because that condition is not true so if I just want to edit the button right now what I can do is go to waiting to advance and I can just change this to say true and that now you'll see this next button appears and now I can style this next button so if I click into the next button here which I'm on I can go ahead to go to Styles here I can add a class so we'll say add style and we'll just call this you know what actually we could what we could do is we could just reuse the answer style so if we do that now it looks just like the answers which I think is actually fine but we will add another selector to this as well so we'll just say add style we'll actually create another class I will'll call this next- BTN and create that and then we'll just add a little bit of margin so if I go here to margin it's going to go like that uh and sorry I don't want these to be on all of them so I'm going to unlock these so zero zero I just want actually 10 pixels of left margin so let's add that or no not left top margin so that we kind of get a bit of spacing here between the other um what do you call it options okay so I think that styled that now in the same light here we have this reset component that we can't see so if we want to view that we could just have to do something like this or true and now it's going to show us the reset component and then we can adjust this however we want so for this button this is the one that I actually wanted to change so I'm going to click on the button click button and let's actually just style this just like the next button and just like our answer press to try again the one thing we will do though is we will add a style so let's go to call this what do we want to call this reset BTN and create that class okay and I just want to set the width so for the width we're going to change that to 100% because I don't want it to be small like the other ones okay you scored 0% we can adjust this text now if we want so we can go to the H1 out of style reset text okay and if we go here to the font family we can adjust that and that is looking a little bit nicer sweet so that's that we can close out of that close that for a second I'm just going to go back to app. TSX here and I'm just going to remove some of these adjustments that we did so we'll go true and waiting to advance okay very nice and now finally we can rerun our Dev server I think it's still running so yeah let's open this up okay and we can test this out Tim next question Jose next question you scored 50% press to try again if we want to put that in the middle of the screen we can you can see that we have a fully implemented quiz very nice now obviously if you want to add more questions to the quiz you can go here to questions. Json and you can just add them in so I think guys that is pretty much it uh we can quickly run through the project just to make sure everyone's clear on the code all of this will of course be available to download from the link in the description so I'll skip the Styles and we'll start with app inside of app we have a few pieces of state right so current question index correct answers incorrect answers waiting to advance we also grab the questions from our Json file we then have some functions on submit this handles what happens when we actually answer a question on Advance this is how we move to the next question and then reset this is is going to reset the game so we can play again we then have this case here which is handling if we've ended the game so if we've actually completed the quiz we display that reset component and then when we press that button it actually resets and brings us back to the previous state so this hopefully kind of shows you how you store the main parent State you need in the app component and then you pass call back functions which can adjust that state from the interior components that you're displaying okay so then down here we simply render our St bar and the question component and then we have this Dynamic render here so if we're waiting to advance we're going to display this button which we could have put in a component as well if we want it to okay now we go down to the let's go with the St bar and the St bar very simple we're just displaying the three piece of information that we need in a separate component we have reset again pretty straightforward we have a button when you press the button it's going to call the function from the prop reset everything we have an H1 tag just displaying how you actually performed question. TSX we display what the actual question is we then render all of the possible choices or answers if we go to answers bit more complicated this just because we need to know if we're displaying them as red or green text so we go here and we do all the dynamic rendering and display each of our individual answers either disabling them or adjusting the color when we need to lastly answer simply displays the answer and then we have kind of this style tag here so that we know if we're doing it red green or whatever color we pass it okay so I think guys that is going to wrap it up I hope you found value in this video and especially with this tool codex is really cool again I know they're the sponsor of this video but I had a really fun time messing around with this and especially once you get into larger projects it's really useful to be able to kind of ab test your components have multiple boards for them see how they look in different states and even kind of inject them and move them around in the project a few features I didn't show you right away was that we can actually add components in here so you see there's this little add button and it there's all these components I could actually just directly add into the editor right so I can actually create the jsx or the structure of my UI using this graphical tool if I decided to do that for me probably not something I'll do because I'd rather cat it out but for anyone who's more of a designer you can make a component make a version of that component as one of the boards and then you can actually move it around so you can see we have our red button our green button we have all the different components here rendered that we could actually just take and kind of drag in and move where we want them to be in a specific board so really useful tool again completely free I hope you guys found value in it and I'd love to hear what you think of it in the comments down below so with that said I'll wrap it up if you enjoyed make sure leave a like subscribe to the channel and I will see you in another [Music] one