Hello, hello. So today I'll give a brief introduction to React.js and that would be interesting to do a quiz question application. So essentially there will be a question prompt and you would pick from one of the choices one of the radio buttons. So and then we would click a button to check answers and see how we went. So I'll just focus on one question and once you learn this pattern you can expand it to as many questions as you want, you just repeat the same thing. Okay, so let's go. I am going to use today this environment called code sandbox and the link is codeSendBox.io slash s slash react dash new and I post that to the Zoom chat. And if you use that environment you have to log in, usually it could be with your GitHub account if you have one, and you would have to click fork if you cannot edit right away. Make sure you can edit type anything in the text editor you should be able to edit otherwise you got to log in and click fork here and choose your username. If you prefer other alternatives I think there are if you don't know how to do it locally that's an option otherwise I think some other websites here like these I posted like playcode.io slash react, reactplayground.versal.app and even react's own website react.dev slash learn slash installation. I think the last one is for the local one anyway, I hope you got this environment working so what I want to focus on is app.js. Let's focus on that. What you see in this environment it's like visual studio code if you ever use that text editor and you're going to see here on the file explorer bar and then the file that's open and on the right hand side it's like a browser within the browser where you can see the result of my code and you can see there's this h1 and h2 here and if I change hello world here it should automatically reflect on the right hand side. Now what you see here looks like html but in the world of react it's called jsx but before we do that let's just briefly introduce what react is. It's just a library on the front end that we use to build user interfaces and we build it in a declarative way meaning it should look a lot like html but within JavaScript code. Now this html that looks like html here within the JavaScript code is actually what's called jsx which is just synthetic sugar for a function call to a function call to react dot create element. So if you see babel.js website and you see try it out and click copy this code there and transpile it let me show you babeljs.io this is like a transpiler means it converts the code from one version of JavaScript to another because jsx and all this react stuff it's kind of not supported natively in the browsers we got to do this transpilation so the code becomes what's supported so you can click try it out and if you paste that same code that we did it's going to show you what it looks like when it's transpiled on the right hand side but let me change some option here I think there's an option so you can see the react dot create let's see classic try that yeah if I choose react runtime to classic here I should be able to see that it's actually every time I say okay div class name app that's actually just a call to react dot create element and the function argument is the name of the element in this case div and then you pass a second argument that's like the properties or attributes in html in this case it's class name and the values app you can see it's an object in JavaScript here and then it has many children here because you know h1 h2 are under the div so they're actually passing as the third argument which in turn is just react create element again it's like a nested pattern but this is just the first out of curiosity why what is that syntactic sugar translating to so I'm going to close by the way I'm going to cut and paste I think the link might be too long I don't know if it captures everything but that's the translation that happens behind the scenes code sandbox what is code is code sandbox more of an ID or compiler it's an environment that contains an ID and in this case it's just visual studio I think they use behind the scenes compilers happening also behind the scenes it's all hooked up in this kind of react template there's some stuff going on behind the scenes here that's transpiling the code and if you see public index let me see if I can yeah it's it's not really seen here but yes behind the scenes it probably uses something like webpack webpack is basically it it bundles everything all the code together so that you can serve it along with your HTML page so probably using something like that I'm not really sure but yeah so yeah it has an ID it has the compiler stuff already hooked up behind the scenes a transpiler to be more in bundler anyway let's focus on app.js here so if you're curious how this app is injected it's basically react it takes care of things for you basically all you have to do is declare all your document thing in a function that returns that template basically if you want to in the world of react there's kind of power levels in HTML react when you talk about HTML elements in react you call them components when you talk about the element attributes in react they're called in props so when you look at line five this is like the div component and this class name is the prop or property so it's it's kind of the same thing but because we're doing react it's not technically not the same but that's why I have a different terminology but essentially when you want to create your own element or component in react you just declare a function in this case this is the app function and then you return some declarative jsx something that looks like HTML I might have noticed this class name is not just class and that's because JavaScript language class is a reserved keyword for building you know object oriented stuff you know that's why they put class name for the prop instead of class and there's some import here it's basically importing this file which is a CSS with some styles if you need to declare the styles some classes or whatever declare them here and it's already imported from the file and yeah if you know curious about how this is apt is injected into the thing if because if I inspect this with the dev tools I see there's an eye frame here and you see the body has all this stuff here so but if you look at the page source there I don't know if I can see it through this maybe I can see it a little bit here in this part there's a body of an ID root this usually this div is empty when you have on a react application because react builds everything in the client side by default here so this whole application app is injected into that alone div of the ID root if you look at index.js there's this call here you see it gets element by ID the root that's the div with the ID root and then it creates root at that element and then it root dot render meaning rendered the react application in that div so that whole that's single div has the whole application and you can see the app instantiated here and that's the injection but that's just the boilerplate so let's close the dev tools and get to building the quiz question so for do that I want to leverage some data structure here since we don't have a back end you know like something in the behind the scenes that saw the data and serves us through a server I'm just going to create something in the front end is just an array of choices and then that's inside an object with a question information so let me copy that here for you I'm going to try to piece this zoom chat and I'm going to use that so all I'm going to do is I'm going to go to app.js outside the function and paste that it's a very simple structure it's an object and these objects has a property title and that's the actual question for the quiz the question quiz question and then I'm going to have a choices property that's an array you see the square brackets it's an array of objects each object has the property ID that's a string text and whether this option or choice is correct so this question has four choices because there's four objects in this array of choices and make sure the ID is a string because it might not work if it's an integer as we're doing some comparison later on because in HTML the form controls they usually use string and if you put an integer here you might have some problems you got to you know convert to string or vice versa so I'd rather just have the string ID here anyway this is the structure you can change it to whatever you want I just this is just an example since we don't have a backhand but this is what we'll be working with anyway going back here I'm going to just delete this class name I don't like that and I'm gonna delete the h1s whatever so it there's an empty div element now the first thing I need to do if we are to remember that image that I had before well let's first show this text with the prompt for the question how to make a paragraph in HTML so for that it's gonna be like oops not that I'm gonna do question here you can see the object question got title so if I look at here and I say inside the div the way you can substitute values here from the variable is you put curly brace and then you type the variable in this case we have the question but that's an object so it's going to give you an error so I have to access question dot title so the value from the title will appear here so if you want to literally show the word question dot title remove the curly braces and that's what's going to appear okay now put it back so you can it's like it's like a string interpolation kind of thing so this is in the context of JSX okay you put the curly braces I might have noticed this environment auto formats things for me so it's just the way it is when I save it it auto formats everything so might have noticed that anyway we got the question of title now let's make the choices now the choices here the way we can approach it well we can type put an input type radio input type radio here and that will create that radio but the problem here that we're having is react even though in HTML input is a self-closing tag meaning I don't have to type like this in the react world it always wants you to close the element no matter what so you can either say like this or you can just put a slash here before the greater than if you're dealing with self-closing now I want to notice there's this check this radio button there that I can click now I want to move that to a new lines I probably won't want to put a div here so today I'm not doing a lot of CSS if not CSS at all so it's up to you to style it later if you wish I'm just going to focus on react so I put a div here so I can put it in a new line and then usually what we do with radios is we add a label and that covers the radio itself and there's some text there now the text is going to be the text for the choices and I can see the question dot choices if I look at any of the objects for example if I want to access the first one there would be bracket square bracket zero because we start counting from zero and then I would access dot text to get the actual choice text so let's try just with the first one here after the input type radio it could be either here or there it doesn't matter I like to break a line to make things nicer to see so we're going to do let's see question dot choices brackets zero to get the first one and then dot text but if I type it like this the literal characters will appear so I have to have the curly braces here like that as you can see the first one appears there now what's nice is about putting the label covering the input and the text is if I click on the text it also clicks the radio if I had like the input separated from the label like outside if I click the text nothing happens it doesn't select it so that's why we usually put the label covering the input like I did so without I click and it marks now this is nice but it's kind of repetitive if I do for one two three four and even there's might be some questions with a variable number of choices so a better approach here is to go through every choice here and map do a mapping operation right from for me for each of these objects I want to map it or generate a new array and those arrays will contain this template here that's a very common thing whenever you have a race and you want to create new components based on the element on every element you do a dot map that's from a array prototype dot map function so here what I'm going to do is I'm going to take question dot choices and I'm going to map now remember I always put the curly brace otherwise the thing is not going to work now put the curly braces surrounding it now I'm going to map what I need to pass a callback function you can pass an error function or a normal function like that if I do error function open the braces equal sign greater and then you can open curly brace I'm going to be explicit so not implicit and the argument here is the choice object so I can name it whatever I want I think choice is a proper name and here I have to return the new thing that I want to map for every element in the choice is a rate I want to generate this template so I can return this thing if I cut and paste it here so usually when we have multi-line template a jsx you can put like a parentheses like this and paste it there fix the indentation like that save it now you might have noticed four of them were created but they all have the same text that's because I didn't change my index here see this index shouldn't be like that because I'm no longer accessing already mapping through the choices so I should just get the choice instead of question dot choices I can put choice dot text there because every iteration the choice object will be different now I can see the correct choices as they are reflected here okay that's cool I can click click the text but you notice how I this is supposed to be only one single choice it's selecting all of them that's because in html you need to if you want this to be grouped into a single like selection thing you must set the name attribute of every single radio to be the same so if we go here where we have the input add a name prop in react we call it prop instead of attribute and here just can give it a unique name or whatever let's say question dash choice doesn't really matter because all of these will be mapped to the same name therefore I'll be able to when I click it will uncheck the other ones that were that was previously selected okay so any questions so far hope all is good all right so now what we want to do is okay I can select one of them I you've noticed that every object has a correct property that tells me whether that's the correct answer so we want to be able to check the answers so to do that I'll add a button here after I do my mapping before the end of the div I'll add a button here type button and this button be to check the answers when I click nothing happens when I click right now now to do check the answer I'll add I'll make sure to when I click the button it will do something now to add on a click event listener here in react world it's similar to html when you add the on click attributes but you have to add on click like this with the c capitalized because that's a camel case and then you have to pass in html it's like a function name and parentheses but in react world it's just a function definition that's the name of the function this is how called check answers check answers here and I go before the return for the app I'll declare that function check answers and you you read that right I'm declaring a function inside a function anyway so we need a way here the signal that the answers are to be verified so one way I can do that react is we have to introduce the concept of state but let me see if we should backtrack a little bit because I need to know what answer I selected there's no way right now if I click one of them how do I know what's selected so typically what we want to keep track of that within the javascript code and one way you could do that is set a variable and like selected choice id because every choice kind of has an id that's unique to the choice so I can use that to keep track of what's selected so selected choice id but the problem with the variable here if I put inside the function let's select the choice id let's initially have it know the problem is react won't know about this as it goes about rendering the application so let me demonstrate that so if I go to the input here what we're going to do is control it so usually you want to set the value and the on change so the value attribute for this will come from selected choice id so if I do that it's a fixed value right now and you got the on change that can be called whenever by the way I want to make this wrap because it's kind of annoying so if I remember I can click here settings editor where is it user preferences I can search for word wrap and on because I don't want to scroll horizontally every time okay now it's wrapped so on change I can define a function here on choice change and then outside before the return I can declare the function on choice change here now I can put the event as the parameter so I can get access to what was the choice what was the value but as we have it right now every single radio doesn't have a specific value so what we want to do is add a value attribute here instead of being the choice this should be actually be checked sorry because when we deal with a checkbox or radio to keep track of what's checked or not it should be the checked attribute not value value is actually what each of these will represent so this instead of value here put checked and then the value itself will be the id of the choice because I want to uniquely identify each radio with something different so I can put choice dot id because that's unique so if I right click here in the dev tools and this is what it looks like and see the first one has value one because that's id one and then the subsequent ones will have value two and then value three and value four that's what I wanted so that even though they're in the same group with the same name question choice they have a different value and then that way when I when I click one of them the function on change on choice change will be called with the event argument and when I say event dot target that refers to the input itself and I can get access to the value right and I can start this value in the selected choice id variable have here but the problem is you're going to see if I do it this way it's not going to work so if I click here I put the value checked let me see what's going on hints let me show you the selected here where is the let me put it outside just for debugging I'll put selected choice id here selected choice id for debugging purposes I will write it here it's debugging you can remove later see selected choice id is still no it's not changing it because react doesn't know about it so the only way for react to know about it is to track the variable value in the react state now to do that we use what's called a hook called use state so instead of doing like this common variable you want to keep track of things start things in the state so gotta go here and port react from react so that we can use the react module here so I'm going to use react dot use state here with null as the argument so what I'm doing is okay react dot use state this is a hook h o okay and you're saying okay I want to keep track of a state value and the initial value is null it could be anything you want here initially it's going to be null because there's no selection okay and then this thing here returns an array of two elements the first is the variable you can access the value itself and the second is a function that can be used to modify that value mutate it so you're going to see people doing a destructuring here a lot instead of using the array because if I do a here for example let a be that the way I can access the thing let me try console log it here that's another way of debugging uh let me just rename it the same way sorry about that uh what is that shouldn't be a problem anymore I think if I open the DAV tools with a right click inspect click console I should be able to see let me put a text here selected colon and I can filter here selected there you go now I can see this is the log of this part every time this component is rendered that is the function is called we're going to see this value selected choice ID you see it's an array and the first is no because that's the initial value and the second is a function here that we can use this is a bound function object anyway you're going to see this a lot like uh brackets set selected choice ID what it's doing it's it's taking the first element the array putting in the variable selected choice ID and then the second is that function or bound function object we can put it in the second variable called sets set selected choice ID so that whenever we need to change this value we would call this function pass the argument the new value okay if we do that click a trash can to clear and refresh this let's see what we get there she selected now it's just selected source ID the no value and the other one is the function okay with that I can delete this because we're done debugging okay and now if I click let's see I might check to still select a choice ID like before even though now it's coming from the stage so if I click select well it's not doing anything because whenever I need to change it I need to call this function set selected choice ID so here you would say set selected choice ID and pass the event of target that value as the argument now if I click see that it's changing the selected choice ID into debugging all right great okay now the problem that we get it right now is checked checked you see it's all bugged up even though the number is correct here so the selection is stored correctly but the visual is wrong and that's because I need to verify okay I'm only going to check this circle if the selected choice ID is equal to this choice ID so to change that here in checked I would say okay if the selected choice ID is equal to the choice that ID that is this specific choice that I'm looking at right now if the ID is equal or matches what I selected then I'm going to mark this as checked otherwise I'm going to leave it unchecked so that fixes the bug visual that I see and there you go now that you know that it's selected correctly you can remove the debugging here so I taught you two ways of debugging console log or you can actually use interpolation in the template so that's done I delete that okay now we we're controlling this is called a controlled input or when you put the value and on change defined explicitly now we have access to the choice whenever I reference selected choice ID I know that's the selection by the user that way it can match with the correct answer or not so when I click check answers I want to be able to show some feedback on the right hand side of the choice text saying whether this is the correct answer or it's incorrect so let's do that so when I want to check answers here I click and call check answers check answers I want to set something and that's to a flag to say hey all the answers should be verified so that the UI will change according so it can keep track of another state so react or use state by the way you might see this being used without react dot and if you want to use that all you have to do is go here in the import put a comma use state and use unnamed import like that that way you can use state without saying react dot so if you don't want to you might see that a lot as well and then for this state I want to make it a flag true or false so initially I don't want to verify the answers so we're going to put that and here by the way it could be a const it doesn't have to be let because we're not reassigning so const let's say verify answers is the name I want to give to this variable arbitrary set verify answers you'll notice the pattern for the variable to access and the function variable to change it is always verify answers and set whatever the name of the variable previously was it's just a naming convention but you could technically change this to anything you want anyway so when I click check answers I want to set verify answers to be true meaning okay I want to show the feedback to the user now that we have this variable verify answers we can use it to either to in the UI to show the feedback so the feedback will be next to the choice text here but I will do it outside the label so if so thinking in terms of if else it would be like this if verify answers is true I want to show whether it's correct or incorrect that's what I want to do now to do this here I'll kind of isolate the logic in a separate function so we can also do that instead of writing inline so I'm going to put the curly braces and I'm going to say here uh let's see you should call it render feedback and make this function that I'm going to call and it's all it's do it's going to return some template for the feedback so that I can kind of isolate the logic and use if else so function render feedback and this should return some feedback now before I do that I got to check okay remember that check so if verify answers is true I can just write it like this I want to show whether it's correct or incorrect but I only want to show that if the user picked that choice you know because there could be many choices I don't want to show correct and correct for each I just want to show for the one that I picked so I pick one it's going to show correct or incorrect so I'm only going to show this if verify answers double n percent and the selected choice ID is the the current choice that I'm looking at but to access choice here I can't right so I have to pass to this function so this function will take a choice as the parameter so when we call render feedback we have to pass the choice remember we have choice here we have to pass it here and like that okay with that I can put the if curly brace don't write twice let me remove this fix the indentation here add the closing there now I'm going to return something but even before that I got to verify okay is this choice correct or not okay if the choice correct I'm going to show correct okay I'm going to return a span I'm going to say correct maybe I can add an emoji with I'm a windows so windows key dot and put a check mark emoji there and if it's not correct else let's return here a span command uh windows dot cross which is like incorrect you can you don't have to have the emojis is for sake of it anyway so those are the that's the logic there so if verify answers has been called meaning if I click the button to check the answers and this choice I'm looking at as I'm rendering every choice if I match the one that the user picked I'm going to verify if the choice is correct and put a check mark next to it otherwise an incorrect let's let's see it in practice let me choose the right the wrong one you see I click check answers is the things incorrect and the way I have it right now I can select anything and because the verify answers is true it's always showing whether it's incorrect or correct but typically when you choose something you want to disable selection so you can actually disable it if you go here where we have the input you can disable that if you called oops disabled if you call to verify answers right verify answers is true this will be disabled you see that now I can't choose anything and that tackles that problem now let's add a reset button here so we can try it again so if I had a button here type button on click is just reset answers and reset is a label let's make the function reset answers here function reset answers so this is simple so to reset does this just mean set the selected choice ID to null and set the verified answers to false right because we don't want to show feedback because it's been reset so two things right two mutations of the state and this reason this works is in react it's like a reactive programming the sense that whenever you change the state in react it will trigger a re-render that is a re-render is a call to the component function again so that's why this works when I click this thing for example the first choice what happens is it calls the on change on choice change then it calls to set selected choice ID this is a function that modifies or mutates the state right because it's being tracked by the hook reactive state so because of this state change react will notice hey you change something in the state therefore I'm going to re-render this which means calling this function again and then it has what's called a shadow DOM so this shadow DOM is like a copy of the DOM that you see here if you right click and it's going to notice hey this is different from the original what I'm showing to the user is different from the one I just have right now because the users change the state and then this should be marked as checked so what's going to happen is the next render this function is called again and when it comes to render the first input the checked will be true because selected choice ID will match the one that I had just clicked right and that's why I clicked that it's now showing checked that's why it's called react it reacts to changes in the application this case state another thing that triggers change is the prop so whenever a prop many of these value for the prop changes also triggers a re-render okay so what else we got here we can reset I can check answers can choose anymore I can reset so now I can pick again and then click check answers one thing would be nice to tell the user what's the right answer right because I don't know what's the right answer so let's do that well to do that we can add next to the right answer the feedback so let's say here when we render feedback remember we have this function render feedback that's called for every single radio but it's only rendered it's only render anything if it's the selection from the user right because we have verified answers and selected choice is the choice the user picked but we can add an else if if here else if though you're still verifying the answers true and but the selected choice ID is not what the user picked right the choice right now that I'm rendering is not what the user picked in that case I can check if this is the right answer I'll show it this is the right answer right so I gotta also add if this choice is correct if this is true so if you call to verify the answers and the user picked something other than this this one this choice and this choice is the right answer in that case I will show a span saying with a finger pointing the right answer so now you can see here it tells me the P hello world is right answer now what if I reset and check answers without picking anything it would be nice to tell the user you didn't pick anything so we can also do that if you want go here right after or before check answers I guess okay if we call to verify answers and the selected choice ID is no meaning I didn't pick anything I can render something that something could be a day of saying you didn't answer this question now you notice I leverage a lot of double ampersand in these places especially if it's in line in the JSX you're going to see that a lot if the because it's short circuit meaning if the value on the left is false everything to the right hand side is automatically ignored because it's an ampersand mini and operation well the and operation to work everything has to be true so every expression has to be true if it's false it automatically just cars everything to the right because there's no point in checking all of them have to be true if one is false I why bother keep going so it first checks to verify answers is true and then it goes on to check if it's true okay I'm going to check right hand side has the user selected nothing if it's true then I'll say I'll put their idea of what you didn't answer this question and you can see here if I reset and click check answers it shows me you then answer this question okay yeah so just to summarize when we had the question title so the ampersand acts like a Boolean function for JS ampersand is just an operator the and operator it can be used in the JSX to conditionally render something if this verify answer is false false is taken to be something that won't render like if I say false here later if later false is going to say false but if I put it in curly brace it's not going to show anything and that's the point of this if you verify answers is false it doesn't show anything if it's true it goes to the next one and if this is true it goes to the next but if it's false it doesn't render anything so that's the point this is like equivalent you're putting if verify answers and double ampersand select the choices null return that right so we can write this in a separate function if you want render no answer how about that we can take this logic here and put in a separate function render no answer and then we paste the same logic so either you place the same logic without the curly brace or you could do the if else I think it's easier to read right so if I do if verify answers and select the choices null you're gonna return this div like that let's see uh fix the syntax here it's the opposite here no need for that here like that so this is like the if explicit if case if that's the then return this if this is false it returns undefined from the function so if you put undefined in a jsx it doesn't matter anything remember line nine here if I put undefined nothing lets render that's why we leverage that a lot either false value undefined it's not gonna render let's try no even no doesn't render okay that's why we always use that yeah if you think this is easier this way write it this way other than the inline version this I think this one is clearer okay render no answer it's if and then return that yeah so basically you could replicate this create a component for this that you could call the question component or something like that let me demonstrate here if you want to create your own component just create a function let's call it question for example and then the argument usually the props that's passed in you know when you instantiate a component we're gonna see it soon when you instantiate like this you can pass props like that which are the attributes and they would be appear in this props object here for axis in any case return something from that let's take the this thing here all this stuff actually I just want the this is a little bit of tricky because I would have to to show you right now because we have check answers if we had multiple answers it would have to call on this set set selected choice ID and the other one so that's a bit complicated to do right now but I can just show you the template for the question if you want to do the template instead of everything here let's take the we got the title here and we've got this like that let's try to do just this part so what you do is a copy that paste it here let me put a so if you want to return something you could put a div or you can do what's called a fragment if you don't want a div to be inserted there you can use react that fragment that's like a div but it there won't be any div included there and people will often omit this name and put it like that so if you have multiple things to return and you can't get it to work just put a fragment like that now here a props you can pass you see I don't have question available here so that's the problem here when I when I take this part and comment out by the way control slash we'll comment this out this is how you comment JSX with the curly brace slash star in the beginning and then at the end here star slash so I'm going to replace that with question like this see at my own custom component but the problem is I don't have access to the question so I would have to pass it in to pass it in you can put as a prop like this question is equal to question like that that's one way of course here we're doing a global variable so it probably doesn't matter but that's how the way you would pass it in so that way from the question here you would say props dot question so props dot question dot title props the question dot choice so on some people like this structuring meaning taking extracting this into a variable called question it would do like const curly brace question equals props that just means create a new variable called question that's extracted from the question property of those object props you might see that a lot too okay now the other thing I don't know is select choice ID now that's why I was telling you this kind of complicated to do right now it'll have much time but suffice it to say you could also pass that in that's also a choice you could say this is like coming from props dot selected choice ID so you go to hope you would go here wearing such a question you pass it in selected choice selected choice ID equals selected choice ID now this selects choice ID the value is what I have here and the prop name is defined by the question component so I don't have to have the same thing I could change the select source ID 123 if I had it like this I would have to change my prop name here to select the choice ID 123 okay but I think it's okay to be the same name but they're not the same thing keep that in mind okay now it's complaining about on choice change so you can do the same you can take that from props that's going to complain by verify answers take that from props you can see it's a little bit tedious uh but that's just the way this is built probably there's a better way that I'm just demonstrating how to press the props to verify answers is verify answers and you can break a line here if you want and write it like this I think it's nicer to see and what's the other one on choice change equals on choice change so you're like passing down from one component to the other now it's random feedback because I define it here so I could actually move this function cut it move it to the question component before the return and then I would have to say okay verify answers with the props dot and then select the choice props dot and now render no answer is not defined where's that oops I copied the wrong one was that the wrong one sorry let's see yeah it's sorry I copied the wrong one it's render feedback sorry about that let me take this one instead and paste it here so I would say props dot props dot or you could just destructure here if you don't like same props and then select the choice id and what's the other one oops s answers s now let's test it see if it's still working okay that seems okay reset okay click that right answer that's still working okay so are we factoring into this question component worked okay okay so that's how you create your custom one passing the props from one component to the other passing the information via props it's probably a bad much better way but this is the way you would do it and then you could read more questions but that's probably going to involve more things you got to keep a track of in the state you would have to have multiple choice IDs right because there's so many questions though this wouldn't be just one you could maybe make an object of every choice every question id or an array could work too something like that but I think that's enough for this lesson