CodePath WEB102 Spring 2025 Week 3 - Christina Hughes on Responding to Complex User Input

Summary

Highlights

• Christina emphasizes the importance of handling complex user input effectively 🌟.
• The class explores form handling in React, focusing on state and input control 💻.
• Students learn how to manage state with arrays and objects for better performance 📊.
• The concept of 'lifting state' to share state between components is introduced 🔄.
• Interactive labs provide hands-on experience, reinforcing the learned concepts 🔎.

Key Takeaways

• Understanding form handling is crucial for responsive user interfaces 🌟.
• Managing state properly, especially with arrays and objects, can avoid common pitfalls 🚀.
• Controlling inputs via React ensures consistency and reliability 🎯.
• Lifting state helps manage shared information between components efficiently 📈.
• Breaking down complex problems into smaller, manageable parts enhances problem-solving skills 🛠️.

Overview

Chapters

• 00:00 - 01:30: Introduction to Complex User Inputs In the chapter titled 'Introduction to Complex User Inputs', the focus is on enhancing user interfaces by responding to complex inputs. The session builds on prior work where simple interfaces were created with components and state management. The goal is to equip readers with additional tools to handle more complex user inputs effectively.
• 01:30 - 03:00: Agenda and Course Objectives The chapter titled 'Agenda and Course Objectives' begins with a request for someone to read a slide aloud, which Aiden does perfectly. The slide emphasizes the importance of being present both physically and mentally, building an inclusive community, practicing curiosity, adopting a learning mindset, asking for help when necessary, and keeping cameras on during sessions. This introductory process is indicated as a recurring weekly activity.
• 03:00 - 05:00: Feedback and Community Building In this chapter titled 'Feedback and Community Building', the agenda for the week is introduced. The discussion will cover four interconnected concepts, although they can also be regarded as separate ideas. The first concept is form handling, followed by arrays and objects as state in React. This builds on the previous week's topic of simple state variables like strings or numbers, by making the state more complex.
• 05:00 - 09:30: Form Handling Basics This chapter provides tips for efficiently handling multiple inputs in coding. It discusses 'lifting Upstate,' which involves moving state out of a component to a parent component, enhancing code efficiency. The chapter will also include a lab section and addresses feedback, stressing the importance of feedback in the learning process.
• 09:30 - 12:00: Controlled vs Uncontrolled Components The chapter discusses the feedback from participants, highlighting the importance of anonymous feedback which is invaluable for the improvement of the sessions. There is an appreciation for teamwork and the connections being made among the participants, especially in breakout rooms where people discovered shared experiences or backgrounds. There's a strong positive sentiment towards the interactive coding sessions, indicating that they were particularly engaging and impactful for the learners. The chapter emphasizes the importance of communication, collaboration, and continuous learning in the educational process.
• 12:00 - 16:00: Types of Inputs in Forms This chapter discusses the types of inputs that can be used in forms. The discussion includes a focus on the importance of flexibility and incorporating feedback from previous sessions. There is a plan to demonstrate topics as needed, with an emphasis on explaining code and providing comments to accommodate varying levels of familiarity with syntax.
• 16:00 - 30:00: Using Arrays and Objects as State The chapter titled 'Using Arrays and Objects as State' begins with an introduction aimed at aligning all participants with the starting point for this week's lesson. The instructor initiates a brief discussion prompt but chooses not to engage everyone individually due to time constraints. Instead, there's mention of a website named 'text emoji.png', created by a third party.
• 30:00 - 43:00: Handling Multiple Inputs The chapter 'Handling Multiple Inputs' discusses strategies for managing various types of inputs effectively. The transcript snippet provided seems to involve a speaker instructing someone to add a message to a chat, possibly in the context of training or live demonstration. However, more detailed content from the transcript would be needed for a comprehensive summary.
• 43:00 - 57:00: Lifting State Up The chapter discusses the concept of lifting state up in React applications. It encourages participants to think about what they would need to learn to build a React website. The conversation includes inviting suggestions via chat on requirements for building an application, such as handling user input and passwords.
• 57:00 - 60:00: Lab Introduction: On My Grind The chapter titled 'Lab Introduction: On My Grind' seems to start with a technical challenge or task involving accessing a controlled system or environment, possibly a computer program or web application. The narrator appears to be demonstrating this process, initially attempting to bypass a password protection, suggesting a security focus or demonstration. They express a careful approach, perhaps to maintain privacy or security, indicating an educational or cautious intent. As the scene unfolds, they eventually encounter a password requirement and mention seeing a form handling feature, indicating progress in their task. Although there is some uncertainty and trial-and-error in their approach, the eventual discovery of a password marks a small success in their endeavor.
• 60:00 - 67:00: Lab Review and Wrap-up In the 'Lab Review and Wrap-up' chapter, the conversation starts with a lively chat. The participants discuss various topics, jumping from form input to a message they received from someone named Hame, which translates to 'I am so hungry'. The speaker relates to the message, expressing their fondness for food. The chapter concludes with the speaker contemplating what they need to learn further.
• 67:00 - 71:00: Upcoming Career Crash Course The chapter titled 'Upcoming Career Crash Course' discusses the implementation of mapping emojis to words or characters. The conversation revolves around the idea of creating a dictionary or decryption system where each emoji corresponds to a specific word or character. The audience is thanked for their participation and asked if there's anything they've missed.
• 71:00 - 72:00: Project and Session Survey In this chapter titled 'Project and Session Survey', the discussion opens with a brief mention of encryption methods, although it is noted that this will not be the focus of the discussion. Instead, the chapter centers on handling complex form input. The focus is on how to effectively combine the inputs from various elements of a form to produce a meaningful output for the user. The introduction suggests a practical and user-oriented approach to managing form data.

CodePath WEB102 Spring 2025 Week 3 - Christina Hughes on Responding to Complex User Input Transcription

• 00:00 - 00:30 recording has begun this week we are going to be digging into responding to complex user input so we've already done some work to kind of have some simple interfaces available to the user through our components that we build and having some state to remember the information that's relevant for them but today we're going to add a few more tools into our toolbox to be able to increase the complexity of that input that we can respond to so um okay let's get started
• 00:30 - 01:00 already have our chat questions answered thank you everyone we're going to go ahead and get into our intro um will somebody read the slide for me really quick as a community we will be present physically and mentally actively build an inclusive community and space practice curiosity and adopt a learning mindset ask for help when we need it and keeping our cameras on hey awesome thank you Aiden that was perfect we are going to do that every week and um it's time
• 01:00 - 01:30 to get into it so let's see here's our agenda for this week we are going to have a quick intro and then we're going over four different concepts today they all are related and kind of tied together but can be thought of as distinct ideas so we'll have form handling first which you may have had some exposure to before arrays and objects as state and react remember last week we were going over Syle State variables like uh strings or numbers and this week we're going to make that state a little bit more complex we're going to
• 01:30 - 02:00 give you some tips for handling multiple inputs at the same time in sort of an efficient way from like a amount of lines written of code standpoint um we'll go over lifting Upstate um out of the component of interest to a parent component and then we'll go through our lab and wrap up so um all right so that is that um okay we have a little bit of feedback that we were going to include in here today again just like every week I read every single piece of feedback so does um our program manager and other
• 02:00 - 02:30 people as well so thank you so much again it's all Anonymous but it's invaluable so thank you thank you thank you to everyone who filled that out um some glows from last week teamwork again it seems like there were a lot of connections made in your breakout rooms about like oh we go to the same school or oh we knew each other from before and I love hearing that and so I love that you are all are communicating in your breakout rooms and um I'm really excited for the learning and the collaboration that you're going to get to continue doing there every week also the interactive coding seemed to be something that struck a cord with a lot
• 02:30 - 03:00 of people and helped things to click so we'll try to incorporate as much of that as possible this week we are going through many topics so we will carve out time for those demos when we need them um but we only have a couple of them to start so but we can stay flexible and then for grows we wanted a little bit more explanation and code comments I think you know it's um it's everyone has kind of a different background for like how much have I seen syntax like this before so um I will add more explanation
• 03:00 - 03:30 and more of a line by line step through this week to make sure we're all coming together from the same place um for our starting point so um okay we have a quick quick little discussion like prompt here I I'm not going to take the time for everyone to go through this on their own but um I wanted to like okay so basically there's this website called text emoji.png cryed by someone else so I
• 03:30 - 04:00 want somebody to go to text emoji.on to add that message in the chat I'll give it just a few seconds
• 04:00 - 04:30 anyone going someone told me that they're doing it so I don't wait forever okay awesome thank you and then while we're you know while we're doing this start to think about you know what would you need to learn in order to build this website with react maybe add some stuff in the chat on that if you're not doing an emoji encrypted message what what do you think you need to learn in order to get this going get user input okay thank you okay I need a password also with these I think so I don't see any with passwords or maybe
• 04:30 - 05:00 maybe there's not a password so let's see oh my gosh can I not even copy this okay I can hang on all right so I'm GNA do this privately first just in case anything crazy sh all right now I need a password okay anybody with a password also I saw form handling okay maybe this is not g to go oh oh here we go okay I got one
• 05:00 - 05:30 oh my gosh this chat is crazy okay here we go um yeah form input is definitely okay we got one we got a live one here is the message that we got from hame I am so hungry is the translation I I can relate to that I'm glad that's what came up I'm a food girl I always I'm always down to eat some food so okay so let's think about it what do we need to learn in order to be able to
• 05:30 - 06:00 implement something like this let's somebody come off you tell us what's what do you think um have like some sort of a mapping for like every emoji that kind of like like sets one emoji to like a certain word or a certain character that can be decrypted off like a dictionary or something yeah yeah that's one thing what else thank you you missing
• 06:00 - 06:30 Sunday did you have something yeah I was gonna say maybe like different types of encryption methods yeah yeah that's a good one too we're not going to get into that today but what we are going to get into is how we handle complex form input how do we combine the inputs of these different elements in the form into something we can operate on and give some meaningful output to the user so um let's this is
• 06:30 - 07:00 getting in my way hide this thing okay okay here we go so back to the slideshow um okay here's a quick project preview also by the way so this is going to be what you work on outside of class this week last week you did something very similar but there's a few things that are different this time who wants to call out what we have changed with this week's project arushi did you want to I think we're able to add the input yeah
• 07:00 - 07:30 that's exactly right we're going to add the input so here you can see compared to last week we have kind of a guessing game that's coming into play um we are going to be guessing the answer and then submitting it and then we will have a streak of um answers that are correct so adding on to what we did last week with some tools that we're going to add today uh and then yeah here's kind of another explanation of that so we are going to allow the user to enter a guess as I just said show some feedback if the
• 07:30 - 08:00 answer was correct or incorrect and then maintain a set order of the cards uh if you didn't already do that okay it's time to get started with today's content uh the first thing we're going to be going over today is form handling um so this might be something you already have exposure to it I want kind of to get some more voices in the room with like a little bit of a warm tone so can you come on and just say like I know form handling if you know form handling already if you have some exposure to
• 08:00 - 08:30 it just say what you've learned just really quick it's okay if multiple people are talking at the same time just like throw it out there say yeah I've got some a little bit none what is it I've got some um like a baby emote yes I may do want us like PHP okay great cool so maybe through some other languages great thank you so much everyone um awesome so let's get into it what what do we use for for
• 08:30 - 09:00 so you've probably used a form on the internet a million times so I think you all have been exposed to this before but basically what we're talking about is collecting information from a user someone needs to give our website information in order for us to take the appropriate action that they are intending so in my professional experience um some examples that come to mind when I worked at SpaceX we built a new tool for managing work orders so like when someone needs to go take a piece of something and attach it to the
• 09:00 - 09:30 rocket for example they need to let everybody know that they've executed that piece of work in a CT in a very like procedural way so we have this database of work orders and someone can go in and filter that database based on the information that they're interested in so in this case the form are those searching or filtering criterias for each of the different Columns of information that you can contain about a work order so we needed to add a bunch of different and we did this with react
• 09:30 - 10:00 um some other examples that come to mind are when I was building a like a humanoid robot humanoid is robot that goes around hospitals to do things like take out the laundry or pick some supplies up from the Supply Closet you needed an interface where you could set some different parameters for the robot for like calibration or just for like initialization purposes for that environment so we would also use forms to fill all of that out and then submit it to the robot so that it could digest
• 10:00 - 10:30 that information and apply it correctly so just a couple of examples there's a million you can come up with I'm sure it's not that hard to think of one um but just to get a little bit more concrete um we're going to be responding to data entered by the user as it changes value or get submitted so I think this is pretty clear so um briefly we're going to go into controlled versus uncontrolled components and so this is what is going to differentiate working with forms in react versus maybe without
• 10:30 - 11:00 react so in react we want those different input components like a text area or a drop- down box to be what's called controlled so this means basically that the value of that input whatever the value meaning like whatever is actually input to the input is forced by react to be exactly what react says it should be and so there's kind of this feedback loop that needs to happen in order for a component to be controlled now you can make a component an input
• 11:00 - 11:30 component for a form which is uncontrolled we're going to go into that really briefly also but this is how we're going to do things and I might just even skip over uncontrolled because we we just don't do that it's just maybe good to know that there's another option so basically a controlled component is going to have that again the input value like what it is set to living in the component state so remember last week we talked about State and how it efficiently makes sure that our page is rendering whenever that information changes so that it's actually displayed
• 11:30 - 12:00 to the user well this week we're going to be using that state in order to manage the value of these input forms so there's two props that you're going to need to use remember props from week one these are values that we're passing into those elements to configure their behavior so we need to use two props which are value and on change so now I have a caveat here we also might have this on or this uh checked sorry instead of value you might use checked and
• 12:00 - 12:30 that's in the event that it's like a checkbox or a radio button I think so just a quick caveat there could be that but um we'll go into an example in just a moment but basically this is a good starting point you'll we'll see in a minute what does this look like but we're using the value prop in order to tie that input's value back to our state and we're using the onchange prop to decare what happens whenever the input value does change and so through these two values we're going to create this little circle of feedback like fedback
• 12:30 - 13:00 information that's going to keep the value correct and make sure we're able to respond to it appropriately so here's a quick example um I am just gonna make sure needed okay so um here's an example of what a controlled component looks like really quick we are familiar with the first line in this code which is we have used state which is being imported from the react library now remember this capitalized function is our react
• 13:00 - 13:30 component in this case and here we're utilizing state for a variable a state variable called email we have a Setter function like always called set email so what's going on here is that we're returning just an input so you can imagine this is just going to be like a little text box that you can type into and the reason it's going to look like that is because we're setting this type to text and so you you might have exposure to input elements before this
• 13:30 - 14:00 is not input is not a special react thing right this is something that's default like built into your browser and what this input element or component actually manifests as visually is going to vary totally based on what type it is so in this case it's a text box very simple and here's where we're doing that feedback loop I was talking about earlier so we have our value prop and our onchange prop our value prop remember the value prop is how we are forcing the value of this input and so
• 14:00 - 14:30 you can imagine in our first render what is well okay there there's not an initialized value so this is actually incorrect sorry some of these come in default and I didn't catch this mistake so if this were correct it would have an empty string here in the used State initialization and so on our first render what is the value of this text box going to be set to in the chat or live
• 14:30 - 15:00 anyone well let's remember yeah okay we're getting empty zero nothing empty string null Okay so we've got a lot of different answers so the confusion is probably by the fact that there's nothing in here but the intention was empty string it should be an empty string you actually should not pass undefined or null in as like the initial value of your input because this can cause like undesirable or side effects or behavior so you should always use like an empty string if that's the valid form of um like initial empty
• 15:00 - 15:30 quote unquote value for your type of input so um yeah thank you everyone for responding so we had a question why don't we put question marks in you state you do I'm sorry that's a mistake here on this line there should be question or like sorry question marks quotation marks uh there so um okay so we have our input element we have the value is being initialized to an empty string in the event that there is an empty string here in the US state
• 15:30 - 16:00 initialization and then we also remember we can't just have value in fact if you try to give your input element a value and that's it like just a type and a value react is going to throw an error and it's going to tell you hey you can't do that the reason you can't do that well you you could hypothetically um is because remember we're forcing this value based on our state variable if we don't respond to any changes any events
• 16:00 - 16:30 coming from that input element the value that's actually displayed is never going to change so if you hypothetically had this same component except removed the onchange prop from input you can type in that little text box all you want nothing is going to change it's going to be empty all the time so that's why we need to have the onchange event handler to respond to the input that the user has so in this case our onchange event handler is mapping to our handle input
• 16:30 - 17:00 function handle input fun function which you can see here is just using our Setter function for our state variable to set that so this is like the simplest kind of example of that full feedback loop being made the value oops the value going the wrong way in my slides hang on there we go the value is being initialized from our state variable and then the input element is feeding
• 17:00 - 17:30 information via the onchange Handler back to that state variable we've kind of got that complete circle going there um so I'm I see that there are some questions coming up in the chat I'm going to just kind of get through the rest of this section and then we're going to do a quick checkin and we're going to review anything we want to review before moving on so uncontrolled components um I mentioned that I was just going to like fly over this like you really don't need to to maybe know
• 17:30 - 18:00 this except to recognize when it's happening and consider how like what a better alternative would be so basically an uncontrolled component the input element for example is not having its value forced by like a react State variable for example so in this case what can happen is we end up with this mismatched value between what we're working with in our component and what is like in the Dom so we we don't don't do that I'm just going to kind of Breeze
• 18:00 - 18:30 over this um but does anyone have any ideas and feel free to throw this in the chat why do you think controlled components are preferred I kind of just gave you the answer but we have this discuss discussion question here does anyone have any other ideas or thoughts on why we would want to make sure we have our components controlled enforces type checking that's a good one yeah we can we can work with the values that are correct to ensure that the information can be enforced um
• 18:30 - 19:00 more control data sync yeah exactly thank you everyone that's perfect um so here's a quick review over a few different input types um quickly well some people put in the chat have you do you know this already have you seen this before like these different input types I'm seeing some nodding yes ex say okay excellent so we'll just Breeze through this there's you know different types of input that you can use all of these can be used with forms and their state can be managed with react so um here's kind of an example that we'll dig into a little bit more tying this back to react
• 19:00 - 19:30 state which is kind of like our new thing that we're going through so um in this case we're using the type of text which we have already kind of gone over how what that means or what it does we have again our value attribute or value prop of input which is set to a state variable here we have that empty string being initialized correctly and then finally we have this onchange prop which we're passing some sort of of a function too which can set
• 19:30 - 20:00 use the setter function that comes along with that state variable to make sure it actually gets updated so we've already gone through this this just another example of what that looks like so I want to quickly check for your understanding by going through and answering this question I forgot to make a poll so just think of it in your mind what do you think is the correct answer here so I'll take us through it we have in this case a a component there's
• 20:00 - 20:30 another mistake in this one which is that the component is NOT capitalized remember we have to have components capitalized so I apologize for the mistake we have a component here called spicy form and in our form we have one or sorry two inputs um one is a text type and one is going to be a submit button so what we want to answer is what code should appear in the place of the yellow question marks respectively so the first yellow question mark is what are we
• 20:30 - 21:00 passing to our onsubmit event handler for our form and then the second one is what is the value prop that we're passing in and you're all getting it correct the answer is B Zer zero questions there I guess I'm seeing a lot of bees in the chat love that okay so sounds like it's making sense um we can see it work really quick I think that would be helpful if I can find yes okay good so I do have this here so um Okay so so let's just see it work really
• 21:00 - 21:30 quick here is that same one from before except I capitalized this so on submit we said should be set to handle submit and the value we said should be set to spice so there we go we have something showing up now that's good it's rendering and we can see if it works correctly by seeing if that value is working so let's say I set it to cinnamon and I hit submit the spice you entered was cinnamon okay great so we're
• 21:30 - 22:00 having that connection made we have the value being controlled to spice which starts off as an empty State we can kind of see that change if I actually set this as a string we can initialize this to a different value in this case the form value is initialized to paprika because that's what we're passing to use State um so we have that initialized and then we when the input is changed in this case the change events are my
• 22:00 - 22:30 keystroke events right so I'm typing something and that means that the onchange event handler is being fired by this element we're setting the spice Setter via the setter function to whatever the events Target value is so this is like the new value that the input is like the when that onchange event is triggered this is what the value is set to Okay so how is everyone feeling about this I was
• 22:30 - 23:00 I would like to do a little poll really quick if we have one available we'll just do here we go quick temperature check how do we feel about this section's material green on track yellow like hold on I'm confused red I am very lost and would really like to review things um looks like it's just started over again so make sure we get those in and by the way while you're filling out this poll I just want to quickly say like it's totally normal to not have
• 23:00 - 23:30 this click like the first time that you hear it if this is the first time you're hearing this material so I don't want you to feel like oh like you're getting left in the dust if like you're still confused like this is definitely something that takes some practice and some repetition and as you go through and work with it a little bit I think if you're if your learning style is anything like me at least as you go to work with it and you see the errors and you see what fixes them it's going to start to click more and more so I I just want to encourage anybody who's feeling maybe a little bit lost or confused like
• 23:30 - 24:00 this is totally normal and it's part of the learning process so okay looks like we are about 54% green 42% yellow so in this case I would like to quickly ask another poll um which is what would you like to spend more time on if we spent a couple minutes right now what do we need to review and I am
• 24:00 - 24:30 seeing some questions in the chat that seem like they could be a good uh starting point for a little bit of review and I'm just going to check my time we're a little over what we wanted to be but um we are going to see okay okay so we are wanting to get a little bit more information how to make a controlled input component and then how to connect a form to an input okay so and then the E Target value so I'll try to quickly answer these questions um so how do we make a controlled input
• 24:30 - 25:00 component so we already know what an input component is right like we have experience with that before the input element the input tag is something that we have seen before in order to make that controlled there's just two things we need to do which is pass the value prop to the input with that value prop set to a state variable and then we need to set the onchange prop back to the
• 25:00 - 25:30 state variable Setter so you can imagine I wish I had like a a drawing board right now but basically like you have the VAR the state you need a state variable and you set the state variable to the value of the input and you set the setter function for the state variable to the onchange Handler so that's really all you need to do and I think as you go to work with this you'll see that it becomes a little bit more intuitive that is what makes an input component controlled tying the state of your component to the value of the input
• 25:30 - 26:00 making that tie bir directionally is what makes that input component controlled okay and then how to connect a form to an input so check out this V or this example not variable that's on the screen this is going to happen just by setting those input elements as children of the form element so you can see here the form is on the outside and then within that we have our input elements so this is everything is going to be tied through through just like default B sorry
• 26:00 - 26:30 browser Behavior connecting this form to input form takes input children and knows what to do with those in order to submit things so um that this is pretty much like very simple it's just not something we had a lot of slides going over I wanted to make sure that that's clear so we we've gone through how to make an input controlled and then as long as we have those controlled inputs within a form um and some kind of submission behavior for the form when they click
• 26:30 - 27:00 that button we have a functional controlled form for our users so finally um the last thing that you wanted a little bit more information on was the E Target value so basically when this is an event handler right on change we're passing it an event handler and so whenever that event handler function is executed what's going to happen is
• 27:00 - 27:30 that a parameter gets passed into that function so under the hood like the input component is saying oh they typed something so I need to fire my onchange Handler and I need to give it the information which is what was typed like what's typed in my input right now so the way that that information is passed is through this parameter so basically this onchange mapping is calling whatever function I pass here with a
• 27:30 - 28:00 parameter which is convention is to like put e here so this is like stands for event so whenever we are go to actually process that information we are using e. target. value and so one thing you can do let me see if I can just pull up another example really quick okay so uh I don't know if this is going to work
• 28:00 - 28:30 let me try this really because of this like kind of code editor thing might do something a little bit weird but I want to show you if I can no see it like refreshes okay so basically if you we're doing this in like a regular editor this would be logging your um your event and it would show you that there's like it's this big object this big dictionary with all these different weird things in it and one of them them is the target value so that's just the
• 28:30 - 29:00 one that is going to be of interest most of the time um okay so we got to move on uh thank you so much for all the questions I know it's a lot of information but we'll continue to build on this and tie it all together and have some more examples so um stay with us and we're going to make sure everything's super clear okay next thing we are going to go through is arrays and objects at state so last week and even just now we were reviewing what does it look like to have a state variable which is a um a simpler
• 29:00 - 29:30 data type like a string but in a lot of cases you're going to want to have something more complex than that like an array or an object so here's a couple of slides where we're just kind of reviewing we want to give you this like intuition for when do when would I need to use this and I think you can imagine like let's say I have a component which is this whole list and within that we want to map some information maybe it came from like your back end to list
• 29:30 - 30:00 Elements which are displayed to the user so in this case you can imagine we would be retrieving data from the back end receiving a list of objects maybe and then wanting to render each of those objects so this is an example where we might want to use arrays for our state um and then also similarly you can imagine we would I I kind of mentioned
• 30:00 - 30:30 objects in the last slide but we might want to have like a bunch of information in like dictionary form that we want to display in this case we have an image link we have this rare find tag we have a title a description a cost all these things can be kept within state if we want to as a single state variable and we're going to go through how to do that so here is the big gotcha the big thing you need to know about using arrays and objects as state which is that anytime
• 30:30 - 31:00 you change that state variable so remember let's say our state variable is listing like the Airbnb listing we were just looking at and then our Setter function in this case is set listing so anytime we're calling set listing we have to pass that a new array or a new object based on whatever like data type we were using to start with so I cannot just you basically need to treat arrays and objects as totally immutable in the
• 31:00 - 31:30 event that you're using them first state so why do you need to do this well it has to do with the detection of differences the way that react is responding to this information um so but the main thing to know is like you just need to make sure you're you're setting a new variable and we're going to go over some ways that you can do that react also has some really good documentation on how like okay here's the functions you can use and here's the functions you should not not use you might not know offand which ones which
• 31:30 - 32:00 of these functions are mutating an array in place and which ones are actually creating a new like uh array or object but eventually you will gain this intuition for which ones do I use and which ones I don't use I generally favor the spread operator I think it's really easy to read and it's really easy to do the kinds of common operations you need to do like add a new element um and we'll see what that looks like in just a second but here's a few examples quickly
• 32:00 - 32:30 in the chat do you all have exposure to these functions these different ways of changing mutating or okay we got a yes A no yes some okay okay all over the map great that's good okay so we're going to go through maybe a couple of different examples but remember the top section here are ones that we do not want to use just in the event that we're trying to mutate or trying to update our our um array or object State variable
• 32:30 - 33:00 you can use them other places all over the place welcome but in this case we need to make sure that we use kind of their equivalent which does not change that variable's value in place because it won't be detected here's the spread operator I hinted to this I like this one I think it's easy to use so you can use this to combine arrays or add items let's look at the example so in this case we're starting off with an array with two little emojis as our different elements
• 33:00 - 33:30 in the array and so what we're doing here is we're just saying we're making a new these are const we're not changing cars we're making a new array called new cars and we're going to basically like expand all of the elements of the cars array into new elements of this array so you can see the intent you can imagine like okay let's say I wanted to add a new listing to something I have these two listings already in my state and I want to add a third one here's here's
• 33:30 - 34:00 exactly how you would do that so let's imagine in this case this is not what's shown here but you can imagine that cars is a state variable well if I had an interface for the user to add a new car to the list of cars we would then need to call set cars with new cars passed into it not cars so we'll see an example of this in just a moment but basically you can use cars to get the value of
• 34:00 - 34:30 cars but if you need to change it if you need to use that Setter function set cars you need a new one okay so let's do a quick check what is going to happen to our count when the counter button is clicked here just think about it for a second just think about it for a second and then give everyone a chance to think okay and then you know we'll give it another minute it just think about it read it you can see actually I'll walk
• 34:30 - 35:00 through it so in this case um we have a count variable we're initializing it to this object we are using an object here not a number that's very important so this is our new thing that we're learning this object State variable uh is what we are looking at and so whenever we have this button we're passing this onclick Handler called handle click what happens here we
• 35:00 - 35:30 are directly changing the count likes value and then we're setting that to the new thing so we have a a mixture of answers here I think as time went on I started to explain it I think it started to click a little bit more we're not going to see this variable changing this might not be intuitive you might have thought that it would change and that would be a totally reasonable thing to think but let's go through why it doesn't change so in this case remember we have our count State
• 35:30 - 36:00 variable is an object with one key in it which is called likes and that key value is zero so when we call count. likes Plus+ this is just incrementing likes by one so that is what we want to happen but ultimately it's not going to change the value of the state variable when we go and count sorry call
• 36:00 - 36:30 set count here so we didn't create a new object for count we just Ed the one that we already had and so that's why it's not going to actually update the value there and it can seem a little confusing again as you start to work with it it'll become more intuitive what would we need to do here in order to actually have this work
• 36:30 - 37:00 I'm reading I'm reading yeah so we we need to have a new object that's set here and as I'm saying this I'm actually questioning can you use the spread operator on a object I think you can but let's double check let's see this is how I would go about doing this if I were hadn't worked with something for a while so let's say we are going to use this variable here we're going to have let's
• 37:00 - 37:30 just say we have an instead of just having the name of this spice uh as a string let's try using an object for it so I'll do I'll just call it salt to start with so in this case we want I'm going to turn off sharing for a second because it can get kind of crazy okay so we have a variable called salt we want to be calling a okay let me see we want to
• 37:30 - 38:00 have a function here whenever this changes you can see this was set to object object that shows me that I'm not doing what I want this is a common clue that something is like not quite right so the value in this case we want to be spice dot name okay there we go we got it to say salt instead of object so whenever this value changes instead of just calling set spice directly I want to call a new function called update spice
• 38:00 - 38:30 um and what do we need to do here we need to use our Setter function so let's just let's just show what what we were just showing in this example really quick so in this case we were just changing the value so I'd be like spice. name equals e. target. Val so here I'm just saying okay our spice State variable I want to set the name to e.
• 38:30 - 39:00 target. value and then I want to call set spice on what on this new updated value right this kind of makes sense why we would want to do that let me just give this quick read through oh yeah instead of doing set spice we want to do actually I'm just going to replace this whole thing with update spice so now whenever this is changed we should be having the
• 39:00 - 39:30 update spice method called with each keystroke and it's going to set our state variables name e. target. value and then call the setter in order to update that so let's see what happens here I'm typing nothing's happening so why why is this this is because we are not making that ultimate connection back to a new state variable being set so let's see what it would look like in order to do that if we can use the
• 39:30 - 40:00 spread variable so let's see const new spice equals that spread syntax is just like this and then we need to add a new element here a new key um which is over so this is a little bit of a contrived example because there's only one example in this case but let's say that this we just want to move forward with that
• 40:00 - 40:30 so in this case instead of instead of changing our state variable value key like that object value directly we're basically copying it over in this case which copies the name and then we're going to basically overwrite that to our new one so let's see if it works it does work okay great love it so oh the submit
• 40:30 - 41:00 didn't work okay oh because I just changed it to this okay submit okay well that's because okay so anyways you can see I think you get the gist so basically we confirmed we can use the spread operator in order on objects just like we can on arrays and we can use that in order to create a new instance of that data and and actually trigger the updating component okay I think I'm way over time let me do a quick check um yeah
• 41:00 - 41:30 so we yeah we're behind so I got to blast on through here um handling multiple inputs this is going to be quick basically we want to show you that you know you can imagine okay I have a form let's say I have a form which is to create an account so I have somebody's name I have a phone number I have an address I have a email address I have their credit card information I have all of this different stuff and I might find that it's very cumbersome to go through
• 41:30 - 42:00 and have a used state state variable for every single one of these things and a handle change function for every single one of those State variables does that make sense like it could end up being a lot of different things so what we wanted to call out here is that you know you have the option to utilize an object State variable in order to sort of simplify this process and so um here's an example I'm going to go through we
• 42:00 - 42:30 were I wanted to go through the example together but I think I'll just kind of um go through this pretty quick and then we can come back and work on it some more um so let's imagine we're building this form here we want to add a new restaurant in this case it's pretty simple we just have two inputs right we have a name and we have a Cuisine so um it wouldn't be too tumbers some for us to have two different state variables in order to manage this but for the sake
• 42:30 - 43:00 of instruction we want to show you what would it look like to have an object hold these two different state variables instead of just separately as a name and value so let's see what that looks like quickly okay so here is the example that I want to show you so there's kind of a bit of code here I'm going to kind of give it a quick overview and then I'm going to drill in on some things that
• 43:00 - 43:30 will probably be new that you haven't seen before so this is our app component we've got two different state variables here we've got the restaurants in this case the intention is for restaurants to be like we saw here the list of things that have already been entered oh my goodness okay um and then we have a new restaurant so this is the the form this is what we want to hone in on for this
• 43:30 - 44:00 example so let's look at what we're rendering we have a form we have a submit Handler we have two different inputs name and Cuisine so one way to do this would be to have two different state variables for both name and Cuisine but we're showing again you know how do we combine these into one state variable so each of these are very similar inputs with the same type and the same onchange event
• 44:00 - 44:30 handler what's different about them is that we have a different name and we have a different value so I think it's we can imagine we need to have different values because remember we're forcing the the value of the input based on whatever variable this is tied in here so what would happen if I changed this Cuisine value to be also the name of the restaurant can anyone take a guess what
• 44:30 - 45:00 would happen there any ideas let's see what happens we can test it out well you can see both of them get set yes exactly so it's going to use that value for both of them so this is why we need to have different variables here and then you can see we're passing the same change Handler which remember this onchange function that's getting
• 45:00 - 45:30 called is how we're tying the changes that the user actually makes back to the forced value of that input so how are we able to have the same function here wouldn't it just end up setting both of them so what we're doing is we're leveraging the name prop here which we that information is going to be given to us when that event handler is called so let's see what that looks like here is our handle form update function this is
• 45:30 - 46:00 what we're passing to the onchange prop for both of our inputs and here you can see we're using this syntax which you you might have see remembered seeing something a little bit similar before does anyone know what the syntax is called it's okay if not any guesses destructuring yeah exactly so thank you exactly yeah so you you we quick saw this last week it looked a little bit different because last week we were looking at array
• 46:00 - 46:30 destructuring which D structures based on you know the index of the values uh because that's what arrays have in this case we're destructuring based on the keys so remember we saw this e. target. value earlier what this line is doing here is basically taking the e. Target value which is an object and we're cherry-picking the V the keys that we
• 46:30 - 47:00 care about in e. Target so we care about e. target. value and we care about e. target. name and we're pulling those two values out into new variables called name and value and we're using those to set our new like our update to our state variable so this function handle form update no matter if I update name or Cuisine is
• 47:00 - 47:30 getting called with if I update name it's getting called with name set to name sorry it's kind of confusing and value set to whatever I typed if I update Cuisine name is going to be set to Cuisine and value is going to be set to whatever I typed so we can see up here in our state variable this is kind of how we're leveraging this and what what it looks like to start and maybe the will help you to visualize like what is getting passed around here so new
• 47:30 - 48:00 restaurant is our state variable it is set to an object with two keys name and Cuisine so this is how we're keeping all of all of this more succinct in our code we're having an object as our state variable instead of um two separate State variables and so uh just quickly again so handle form update gets called every time I type in the keyboard and this is selectively updating
• 48:00 - 48:30 whichever key of our object State variable is relevant based on whichever input field I was typing into so we will make all of this available to you um after class so don't worry about that I'm going to turn on web sharing and add a link in the speaker notes um so this is some new syntax but hopefully it's something that we can um adopt and have in our toolkit and then finally we kind of have this handle submit function
• 48:30 - 49:00 which is calling um set restaurants our Setter function for remember like the list of restaurants that have already been created and we're using what here in the chat anyone or live spread operator that's right our favorite the spread operator in order to create a new array with that new object our new restaurant added into it in addition so um okay okay there we go I did I I think I did this right okay so my favorite
• 49:00 - 49:30 restaurants in Austin asers e Ethiopian restaurant here you can see we were able to pass that information into some kind of an in action or result so in this case we're just doing a alert to show that we have that information available in practice what you're probably going to do with this information is make a back-end call or change what is being displayed to the user based on the input that they have given you okay um so we've gone through that
• 49:30 - 50:00 demo it's 1250 so we're going to just go through this last section really quickly before we do that I do want to do a quick pull how do you feel about um well first let's see how do you feel about using arrays and objects as our um State variables so remember arrays and objects State variables are where we learned that we have to treat those
• 50:00 - 50:30 variables as immutable and create new versions of them in order to display that information to the user and process them correctly okay we still have some confusion we're like about split on green and yellow we have definitely a little bit of red that's totally fair and I think I'm just going to go ahead and continue CU it's no totally normal to be a little confused and I think again as you go through your lab and you start to work with these things you'll see um
• 50:30 - 51:00 green SL yellow yeah okay it's it's totally good so um thank you for your honest feedback everyone we um I think we're in a good place you know these these things are a little bit more complex they're going to be a little bit confusing to start um but let's go ahead and continue to lifting Upstate we're going to just go through this pretty quickly um so we have seen a lot of examples now of
• 51:00 - 51:30 using state in order to manage the variables of our component of Interest so what we're about to go through is the case where basically two child components that live side by side in parallel kind of need access to the same information so you can imagine basically when we talk about lifting up State what we're saying is that instead of keeping man managing this information
• 51:30 - 52:00 which is relevant for both of these children in their individual states we're just lifting that state up to the parent component and then passing the information back to the children as a prop instead of as state so just again quickly as an alternative to keeping the state in these components we passing the same information through a prop so the state is in the parent component so
• 52:00 - 52:30 let's look through that a little bit more so here's a quick discussion uh thing we're g I'm just going to kind of feel free to throw your answers in the chat but I'm just going to talk us through us through this really quick in the interest of time so we want to explore this web page that I'm about to pull up very shortly what I want you to think about when we pull this web page up is two things one which components need access to the state of the edit section on the left and then how do you
• 52:30 - 53:00 think these components get that access so let's see what are we talking about here is the website we're talking about on the left side I can edit this section in markdown and on the right it's sort of processes and renders that markdown as it would be displayed so the question was what state does or what needs access to am I getting this right which components need access to this to this
• 53:00 - 53:30 component State any ideas which components need access to the state of this component on the left so of course the one on the left needs it the preview exactly is going to need that as well so this this neighboring kind of you can see it very visually here these are like two twins you know
• 53:30 - 54:00 they're side by side and one's not you know within the other um and then yeah so we also have this little little little sneaky thing down in the corner here where we're showing some other information about the selection so there's a couple different places is the point where this information is going to be shared now how do you think we're going to go about achieving this it's it's an obvious question we're going to lift up state that's the section we're in so let's look at what that looks like so
• 54:00 - 54:30 I mentioned this a little bit earlier we're going to highlight it again like when do we need to do this when anytime basically several components which are approximately like at the same or lower levels need to reflect the same changing data so how we do this is we create an ancestor component that becomes the single source of Truth single source of Truth is like a big thing that is going to make our lives a lot easier in general as a web development concept so this is an
• 54:30 - 55:00 example of when we're going to need to implement that so um the example that's shown here is if we're trying or what we're trying to highlight with this information is if you try to maintain that information separately let's say I have two different set State functions in two different components it's taking in the same information well maybe that works the first time but something you run into a lot uh when you're collaborating professionally with other people in the real world is okay well I submit my code
• 55:00 - 55:30 it works great well guess what people are going to keep changing that code so on and so on and so and maybe I leave the company what we want to do in order to be good Engineers is to make it easy for someone else to come into our code and understand what's going on and how to change it in a desirable way with intention so you know it's not always about writing code the fasce it's not always about writing code that's like slick or cool you know it's it's how how is somebody going to come come into this and easily understand it maybe that's somebody again is future you you would
• 55:30 - 56:00 be surprised how much you can change between a year and you come back and look at code and think how who wrote this and it's you so um the point is having a single point of Truth a single place where that information is stored a single function that's responsible for manipulating that information prevents a case where let's say I come into this code a few months later and I say oh here's a set State function for this information I change it I don't realize there's sort of a parallel equivalent somewhere else and that that information
• 56:00 - 56:30 would need to be updated in two different places so that's the benefit of lifting up State um here's another quick example you can imagine that we have this accordion panel where I open one section it means all the others should be collapsed and then I can open a different one and it collapses all of the others again so in this case we can keep that active state in the individual panels but changing one doesn't trigger any kind of a change in the other panels
• 56:30 - 57:00 and how do I make that connection it's maybe not super clear if we use State lifted up and we just pass the isactive information via a prop to the panel of Interest or to all the panels sorry then we are able to maintain a single source of Truth for this so um we don't have a a demo for this example I I want to show you some code but we're a little bit short on time so I'm going to just kind of leave it at that um and highlight a
• 57:00 - 57:30 few quick things really quick which is you know you might imagine let's look back at this example so let's say active index is one like on the right here um which means it's the second one because this is zero and this is one so this panel let's say is where maybe my little collapse button is if I click collapse on this panel I can't just say is active equals true because is active in this case is a prop and that information is not going to
• 57:30 - 58:00 sent be sent back to the parent so you might say well how can we do it then the answer is that what we can do is in addition to this isactive variable we can pass in an update active index function to the child now the child can call this update function in order to get this new information displayed so that's the long and short of it and there's a lot more resources that you will be able to dig into to understand that um we're pretty much coming up on
• 58:00 - 58:30 break time we have like 30 seconds left um so in just a moment I'm going to call for a break and you'll all be free to go away for five minutes until my time zone it'll be 10:5 but whatever your respective 05 time is um you're welcome to stay and ask questions or you're welcome to take some time away and then after that we'll get started on the lab and I'll give you a little intro to that so really quickly before in our last 15 seconds um The Prompt here was for you to kind of sketch out a simple component diagram
• 58:30 - 59:00 you don't need to sketch this out but maybe as you go on break just kind of consider in your mind um how you would go about splitting that up into components and where you would have the different relevant State information pieces stored so you can kind of consider this um or just like Let it go into your subconscious and go get a snack and maybe you know some ideas will come to you over time so all right we're going to go ahead and do a break thank you everyone feel free to turn your cameras off I'll be here feel free to jump in with verbal questions if you'd like um and then I'll see you in 5
• 59:00 - 59:30 minutes thank you so much for your attention it's gonna be about gonna be about 50 minutes 5 Z for our lab today uh the lab is called on my grind and it's about coffee um I didn't start drinking coffee until I was out of college but maybe we have some coffee drinkers here so um in this case we are going to be and all this information is going to be in your lab tab my favorite phrase um we're basically going to be having this form presented to the user
• 59:30 - 60:00 with several different options and what we're doing here is like quizzing the user okay let's say somebody wants to order a toffee almond cappuccino what is the temperature what is a syrup milk and whether it's Blended or not um in order to make that happen and so this is sort of like a little quiz form that is giving you some preparation for your project that you'll do at home in the meantime so um that's the lab and so I'm going to pull it up just to show you
• 60:00 - 60:30 here that we're on week three don't forget week three this is your lab instructions and in just a few moments you're going to go to your breakout groups and you're going to dig into all of this together um please keep uh it's somebody asked if it's similar to the flas card project yes but we're using forms so you'll see as you go through all of the different required features and stretch features and things like this how exactly it differs I think it'll be best for you to do that in your lab groups because we want to make sure you have time and you come to a mutual
• 60:30 - 61:00 understanding so just before we do that I just want to do a quick reminder in your breakout groups please have your cameras on please have your mics on talk to each other I know that people who are able to engage with their groups have really wonderful time in those groups so um have somebody be driving just like every week somebody is going to be typing and sharing their screen and everyone else is going to be giving input to that person and helping figure out what needs to go where in order to create the end result that you want so um yeah if you have questions DM your Tech fellow on slack and with that we'll
• 61:00 - 61:30 go ahead and start our 50 minute breakout rooms thank you everyone I'll be here in the main room if you have a question you can hop back over but everyone will start to go to their rooms now um how did it go how was the lab today it was good cool they expect it hard it was more challenging than last week very
• 61:30 - 62:00 very hard it was interesting very long interesting but it was hard it was very easy but very long it was fun but long yeah yeah long okay awesome well thank you for bearing with it awesome work practicing what we're working on you're it takes repetition takes practice but you're well on your way so thank you for showing up against today everyone we have a few things to wrap up with really quick we go I'm gonna this is actually on a later slide but I'm going to go ahead and drop our
• 62:00 - 62:30 class survey Link in the chat there please just go ahead and open it it just takes two minutes you can fill it out while we're talking right now that helps me improve as your instructor it means you get better instruction and things that are more aligned with your learning style so thank you so much for everyone who can go ahead and fill that out so uh let's wrap up really quick just a couple minutes I know it's like time so we're going to do this as fast as possible um project preview we already showed this earlier and kind of went over the differences that are going to happen for your project this week that we are going to be adding on to what you worked on
• 62:30 - 63:00 last week so um that will be wonderful um don't do this yet because we have the class survey Link in the chat and I don't want it to get lost so please um be thinking about what you want to celebrate this week what was going really well today something you learned something good that happened um and oh by the way for the survey link we're in week three this week so um um please make sure you get that filled out now we have an exciting announcement for next
• 63:00 - 63:30 week Maxwell is going to come in and tell you a little bit about what's gonna be happening next week for you all everybody um thank you Christina I just want to uh clarify what's going to happen next week is going to be slightly different than in some ways than what you're used to so next week when you come to class on Saturday it's going to be the career crash course so what that is is an intensive talking about career Readiness Concepts how to kind of take career preparation to the next level Etc it's going to be um led by our career
• 63:30 - 64:00 center team so next week when you come to class you won't be coding it'll be really focused on these career Readiness Concepts um again this is going to happen the same time as class time every week next week it is mandatory so treat this like a regular class like attendance counts Etc all the same rules apply for absences it's exactly the same the only difference is um it's going to be about a different topic and uh but all the places that you usually join whether you join via slack or you join via the course portal or you join via
• 64:00 - 64:30 the calendar invite it's all the same thing the registration link might look a little different but you you're going to join this the same way as always um one note to say is that the content is going to be similar for this career crash course across our classes so if you're someone who's say taking web 102 and you're also taking tip um you can choose not to come to one of those sessions but but you do have to make sure that you email support coda.org just explaining
• 64:30 - 65:00 like hey I'm attending the web version of C3 but not the tip one because I'm in both classes just so that they can like document this and not Mark you absent accidentally for that other class so please U make sure that uh you do that if that applies to you it doesn't apply to you then don't worry about that but in some career Crush course yes you have to come it's going to be great career Readiness that's all back to you Christina awesome thank you so much yes it's going to be great I'm looking forward to everyone getting all that awesome information um it's going to be
• 65:00 - 65:30 invaluable and I'm excited for you all so then we'll jump right back into it next week and just in case you're wondering your project is still due before next week's session I believe um Maxwell please correct me if I'm wrong on that but that is what I believe I saw online um so last things to wrap up just make sure you get that session survey completed thank you so much everyone and then finally let's wrap up just feel free to share out loud or in the chat something that you enjoyed something that was positive and good about today um that yeah sleep this weekend yes it's
• 65:30 - 66:00 time you can go back to sleep if you want um and that's it so feel free to just head out whenever you're ready I'll as always hang out to ask or to answer questions maybe ask questions um if you have any that you'd like to share and yeah thank you so much everyone for showing up today for putting in that effort for the lab and staying present with the content and can't wait to see you all at your next session so take care everyone thank you so much hope you have a wonderful
• 66:00 - 66:30 weekend bye bye thank by thank you oh yes thank you so much bye great thank you thank you take care everyone enjoy your thank you you're welcome thank you you awesome take care ABA what's up thank you thank you