React Coding Interview Prep – 30 Questions and Answers

Key Takeaways

do you have a react interview coming up do you just want to test your react skills this course is for you in this course Nishan Singh from cybernetico will teach you how to answer the most common react interview questions and if you know any other common react questions leave them in the comments to help other Learners hello I am nant and welcome to my video on which you will learn about react important Concepts and interview questions provided by free Cod cam here wearn learned mostly about all the important Concepts in react that are widely used in production and in development and also which are asked in an interview so let's get started now to use the map and filter we will display all the data from the API coming to this here from which API we will display all the data in the UI at the place of this one card which is returning my name and username fine so initially we are getting the data in the response in the console let me show you what I mean open the console let me have this let me show you this we're getting all this data here so first step is first step to do this here is to create a variable and in the ACT variables are simply called States so I mean we we call them States because they can change the property so let me create a state or variable called users which is the variable name and to set the data we will have this set users function and in this use State we will have to use an array because all the data is in an array see followed by objects so let me store them here save this and let me just now use the map so to use a map function we can just we can just use first the array name which is called users users do map then it takes a parameter called user and from this parameter we have to return the HTML wait something is yes now fine which is called we have to return some HTML called div or anything you want yes so see here we have have the data like ID name username email address all the data so this name username email they are called keys so to show the keys sorry show the values which are this Le Graham bre all the data we have to use the value so to show the value we will just use user do name but wait let me copy this card inner and and paste it here then in the P tag I will just say user.name and here we will just we will say user do username username let me see the correct key this yes small username and save and see all the data is now being displayed here from this API so this name is called the key and the Le Graham and bit is called the value now because object exists in qy value pairs all right so that's how Map works now let me give you another example of what we can do with map let me create a function here say map data data it's done it's a function then let's just multiply the ID with two because it's a number so how to do that we will just first use the users first let me create one more array called let's say mapped array so in this array so I mean this this map if you're mapping any array it will return a new array not the previous one because it's transformed so let's say we want to multiply the users by two I mean the user ID so we can do this user then we can say user do ID multiplied by two now in this array of mapped array all the IDS will be multiplied by two so we will get 2 then 2 into 2 4 then 6 and 4 into 8 and so on let me console. log this mapped array let me create a function to trigger this sorry not a function to but a button yes so see C mapped array so just assign the function to this button using on click event now if I click this button it will run so let me remove this two first I think we don't need any other thing just this or let me leave it let me add the button outside here for your difference let me add it here fine if we click this button all the mapped array we will be shown in the console all the ID is multiplied by two let me get it to bottom wait a sec how to add it yes here click map see map ready and see on the lineup number 2 on line number 14 we are seeing all the ma array multiplied M IDs multiplied by two like 2 4 6 8 and all so on so that's how Map works now let me show you how Filter Works so first of all let's say uh okay wait let me remove this save this let's say we want to see only those name who whose name whose first letter starts from a so how do we do that we will filter the data from this users array so we will say let filtered data equals to use State and then we will add an no wait what I'm doing it's wrong I am lost to the yes so we'll do users do filter to filter data and same like the map it takes an user parameter then we will have to return something like this we will say return user do wait sorry sorry user user do name equal to lean Graham so let me just console this now to check if we right or not open the console so click c ma array we have an array here of only one item because the condition is we are only filling the name of the user which has the name of Le Graham if we make an a here it will fish all the data of the names starting from a not starting from not from a we we will fish all the data which has the username of a I think we we get an empty array C because none of the items have none of the names have a name name of a just a to check if all the items include a letter A we can do this return user return user. name to lower case includes our a this now let's try refresh it will lower case okay we don't need this fine now let's try c m array we are selling in empty because none of the okay I think none of the items have a big a all of them are having a small a yes so make it a small a then we will see all the items with a in them which have which are having seven items we are having s items so this and this and this so that's how it works we can also do other properties like this so we can say user do ID if it is less than 5 we will see only them so if the user ID is less than 5 so we will see 1 to 4 let me check now see ma array and we are having only four data 1 2 3 and four if you want to see the fifth data from 1 to five we will have to make condition like this if return user ID is SL than or equal to 5 now let's check see we now get all the data okay so this map and filter can work together also so let's say we filtered the data with all the items less than five all the IDS less than five I mean less than equal to 5 so let's map them now in an array so how to do that we can simply set this set users then filter data let me remove the data uh from here okay live leave it leave it we are setting data here first then we're filtering it if the user ID is less than five or equal to five then let's check we having 1 2 3 4 5 10 items if we click the button this will be changed to five 1 2 3 4 5 or Le Graham this this this and this click the map and see the array has now been filtered to only five items if you make it more than or equal to five let's see what happens we will see last five items like from Mr Miss Dennis screw list see M okay yes we are saying six items we have to remove equal to now let's try again see we are seeing the last five items here okay so that's done okay now let me give you a simple example very simple example we will combine these two first I mean we will combine map and filter together so we will say let sorry const let's say numbers and set numbers let me have the numbers from 1 to 10 1 2 3 4 5 6 7 sorry 7 8 9 and let me also add 10 let me add them fine so here let me just comment it first here and then we will do it here so first let me console or let me just map these numbers here so to map the numbers we can simply do the thing like we did previously but this time we don't have the objects we have this just an array of 10 numbers so how do we show that so we can say this numbers. map we will return the number and we can simply say div do div a number but we have a problem we need one small bracket also and all the numbers are here let me add the class name of card here save and this one card iner here we have all the numbers 1 to 10 let me comment out this card this card and make this as numbers from 1 to 10 so we have 1 to 10 numbers in this array here of numbers now let me transform this array using map so first we will create an uh let variable which will be called square root fine then we will simply map the numbers to get the square root squares not square root sorry fine so numbers. map we will use map function just like before and it will take a number peram so this number is all the numbers like 1 2 3 to 10 like 1 to 10 it will take a number peram which is 1 to 10 and it will multiply each number 1 to 10 as we want let's say in this function we having a square then it will return number into number that is mainly make that mainly becomes the square root we can console. log this number here sorry not number Square let's check the console now we have an array of I think I need to refresh the page no not refresh we have to click this button click it and we have the square of all the items inside like 1 4 9 16 and all fine that's done so here we can have two cases so in this console we are seeing all the numbers from 1 to 100 which are square of all the items so let's say we want the filter first let's say we want to filter or make the square root of all those numbers which are less than five so how do we do that so let me remove and show you from the start it will say let let's let number less than 5 equals so you will say number let me turn off this GitHub copilot disable for Java globally fine you can say number or numbers what is it yes it's numbers do filter first we filter them first it will take a param called number I mean all the numbers just like before then we will return this we will return all the numbers we want which are less than or equal to five it will return all the number not numbers number this number we want here it will return all the number less than five then if this function closes the filter function here we can say map then we want to store all the data in an array in this lit numbers array so we can say let's say uh mapped or filtered numbers let's say filtered filed yes spelling is now correct then again it will return us something it will return us all the data which is wait I am doing it wrong like this it will return something so they can say return what do we need to return the filtered fine now let me store this number less than five in the set numbers array set numbers we are having yes less than we have to set this here now yes set it now we are seeing all the numbers from 1 to five but now if we click the button it will first fil all the numbers less than five or equal to five then it will make a square root also yes we need this filtered into filtered to get the square root save let's try click the map see M button see we are seeing all the items less than or equal to five so we are seeing five six not not more than less than yeah sorry less than five we want refresh the page the ma aray now we're seeing all the numbers which are less than five and the square roots so we have one so it's one we have two so it's 4 3 9 4 16 5 25 fine so that's how we do it how map and Filter Works together so we have filter and then map now let's see tover the conditions of functions I mean so first we will do this so first we will list all the items all the square roots and then we will map or then we will filter them so let's say remove the filter here first here we will say all the square squares of all the numbers click the button and all the numbers have now been Square squared so 1 is 1 2 is 4 3 9 16 and so on but now we want to see all the numbers which are less than 50 so we will get till 49 so we can do this so number less than five here we will add filter then we will say it will take a it will take a parameter called let's say number again then it will return something like uh wait like this return we can say number less than five or make equal to fine save now click the button okay not five 50 sorry 50 yes now you'll see all the numbers squar and then filtered on the condition that if it is less than 50 we will show it here see ma AR okay we only see two which are L than 50 H wait something is wrong here refresh page see M array now it's fine we are seeing all the numbers less than 50 after mapping so in the previous case we were filtering before and mapping after that but in this case we are mapping it first and then we're filtering so that's how map and Filter Works together in both cases so that's all now I hope you learned how map and Filter Works in JavaScript and react here I have a simple example with a count variable let count equal to zero one function to increment it one H1 tag in the return to display the account value and one button to increment the account when we click it so let's try this example click the button see every time you click the button increment the count the value is getting increased by 1 1 2 3 4 and 5 but our page is not getting updated the zero is still zero that is because when this count changes in this function it's not rering our component this app.js component to solve this we have States in react so to create a state in the function component we will have react hooks we have react hooks so our hook is called use state which we have to import it first like this import use state from react so we have to create a state first so const Arrow brackets sorry uh yeah what is it uh array brackets so array we will have the value variable name which is count and one function to change it when we want to change so we will have to use set count you can use anything you want at the place of set count Then followed by as you use state in this small bracket we will add the type of the state so it's a number because it's 0 1 2 3 so we'll use zero like this let me remove this count fine so that's done so if we save the file this count will be zero because now the count is coming from here if we change it to one this will this will be one so let's make it zero now to change it we have to do this we don't need to use we don't have to use this so to change it we will just use set count and in the set count we will increase the value of count like this or let me modify this existing existing one so remove this remove this count equal to count + one we will simply set the value let's say the count is getting incremented by one then we will save the value in the set count now let's try let's increment the count see now it's getting incremented properly like this fine so that's how we use States in react you can create any type of State you want like this is a number then we can have a string let's say name let's say set name equals to use State let me use a so this is a name I mean it's a string so we'll use quotes fine then we can have other states like uh Boolean let's say is visible and set it we will have set is wa set is visible then use state so it's a buan so let's say we want to make it false initially then we have to use false here fine let me give an example here of this Boolean State let's say we have a button or this button we want to see this button only when the state is the state is true so we'll use cly brackets so is visible if it is true I mean using the turn operator so if it is true then this first and small bracket will run or everything inside it it will return this is button but else if it is not okay let me just make it some H1 tag here and I will say visible and if it is not true we will say not visible save so now let's change it remove this or just after this we can have set it set is visible we will reverse the value using this thing so you can say not equal to is visible so let's say if it is false so if we click the button or this function will run it will be reverse false which is true then it's getting stored inside the set set is visible let's try we have not visible click the button to run the function see now it's visible click it again this would be invisible or not visible see that's how it works to use set name we can also use set name so let's say we want to set the name to Nishant let me print it out here as well in H1 so see initially it's nothing so we have not saying anything here click the button in the count or let me change the name of this button you can have change States much proper cck now see the name is now here fine we can have array States as well and object States so we can say const let's say array and set array use state to use array State we will have to use this because this denotes an array we can have multiple objects inside array or multiple items like this or if you want objects we have to use this so let me create or just do this an object first let's say name this should be equal to Nishant let's say age 26 let me create one more object in this array to make this an array object array object sorry object in an array yes that's called object so here we have to use name as something else like UD and make 25 what6 fine so it's an a state see we can also have an object State here we can say const object and set objects to use State let's say an object if you want to make it empty it will be empty like this but if you want to add some value initially we can add some things like name in h properties like this so this is the numeric State this is the string State Boolean State array State and object state so that's how State works and react I mean mostly in function component let's now change to class components so use the class components let's let me just remove all this and make RCC class component to make the class component State let me just remove this as well fine we have to use something called Constructor first Constructor I think that's right inside this we have to use super keyword then we need the state to create the state we have to use this keyword this do state equals to let's say a name so name could be empty state or we can have default State like Nishan so that's how we create inass comp component let me print the state here so to print the state we will have to use this do state do name but let me WR it in H1 tag H1 save see the name is here okay let me add class name of fine this should be in center it's not let me okay need to import AB C CSS import app do CSS like this now it's in the center see so if you want multiple States we have to use name then we can use let's say age we can have zero initially or null also but we don't use I don't prefer to use null so to add the age State we can use age it's zero fine similarly in New State we have this state let's say we have a array of something let's say an array and just a colon and the array we can have 1 2 3 4 5 6 like this so to to view this we can just say this array Dot map sorry this do state. array. map this. state do array. map to get the values from this array see so we have to use one property so if you want to see how Map works you can see my previous video in the same playlist so we can say item so this map okay I will not explain this to you but basically this map will increment or it m this map will what is it called it rate over every item and do something so let's say we want to return something like this return let's say itm multiplied by two save see the all the data is now here I mean all the array items so one is multiplied by two then four then like this so that's an ed State let me remove this all right so let me show you how to change the state so we can have a v a function say change okay here we don't use con keyb sorry we just use change State it's been so long since I used Class component F change State let me add a button button let's make it as change dat on click this dot change status see let's change the status to AG of zero to something we will have to use this dot T State and in side we will use cly bracket the state name so let's say age we want to change and let's increment the age to something so we can say this do state. age multiply by two so now this state will be multiplied by two but let's make it one because 0 into two is it will be zero this is how we change Sten class components now click the button this will be changed to two see now it will be changed to four then 8 16 so on to change the name State we can use this or we can also use in this as well so we are we here we are setting state of the age let's change the name so we can say name will be this dot set State wait what was it this or just let's make it something like UD now click the button say change State it's there and this is changing as well so we have to use State like this change State like this so this is how set State Works in class components setting States so that's done so we two we saw two examples in class component and in function component so what are props props are simply States like this name that can be passed to other component so let me create one component here called child or children child okay just child. JS fine let's make it function component so we have a child component here so let me call this component in our main name JS so we can say import child from one step back child now let me render it here this so see okay let me make this an H1 tag first H1 to make it bigger save so we have this child here fine so this is a child component that we're rendering which is printing this H1 of child here but let's let's say we want to print the state of name here of Nishant so how do we do that we cannot create a state here because it will not work we have two we will have two states and it will be useless so to use this state in this child component we will have to pass it so to pass it we have to use prop so we will have to use the prop name which is called simply name and then the value the state will be inside this scarly bracket and this is the name or this is a value that we will use in the child component to render this state so I will show you what I mean so let's say we are passing name here to call the name we will just use name and in the SE one remove this child and just say name here see it's called Nishan now so this name that is here it's the first name so if we change it to let's say value of props if we save this we will not see anything here because this name has not been this name doesn't exist so we have replace this see now it's rendering fine so the first value is this name that we are printing here and second is the value EX itself that we are getting it from here suppose now if you change the name to something so let me create a button say change name so on the button we will have onclick event and then we will simply do this set name to something let's say UD there save now if we click the button here it's change name this name Nishan should be changed to UD because props are Dynamic so let's check this change name see it's now UD there so Props are mainly used to transfer data between parent component to child component so from parent to child we can also transfer function controls as well let me show you what I mean so let's say we have function called change name so this function will not run in this parent component it will run in child component so what it what it will do it will simply change the name to UD here in this function set name this will be UD so we will pass the function as well like this save so here we are passing the value and the function this is the function and it's the value so similarly like this we have to receive it here change name function so to trigger it we can simply use button and on click first let me add change name label here on the button so on the button we will use on click event just like previously we did in the in the parent component app.js then we will pass the function name that we're passing from here save now let me to go back to Nishant now this button is in the parent child component now click it and the name will be changed successfully so that's how props Works in react using functions one more thing that is to props is let's say we want to pass a value from here to the parent component let's say we want to pass something like hello this is Nishant now this button will be clicked and it will pass the value this string to this function so we don't need this right now let me remove this and we can simply so see we are passing the value here in the change name so this function should accept a parameter so let's say some value so if we console the value in we will see it in the console value or else if if you want to set it here it will be also work like that it will also work like that save but let me change it to something else like Nishant fine now click the button see it's Nishant and open the console now we will have the let me change it again we have the Nishant one again because we are passing the name of Nishan from child to parent that's a hack for props let me explain it again what is props so Props is nothing but simple variables like states which we pass from parent component to child component like this value we can also pass functions that like this function and we can call the function using a button or anything we want like this here third thing we can also pass our some value from Child component to parent component VI this function like a name or something so here we are passing this function change name so change name is being passed here using props it's coming here and on click of this button we are passing some value so this value will go to here in this value and it will print in the console so it's like a hack so that's how prop works and react so here we have a simple example of this El statement if the age is 20 more than 26 we'll print this then else if if both conditions are true we will print this or if none is true we will print the else so we should see these two because these conditions are true open the console and let's check okay see we are getting it two times but don't worry about that that's the that's the problem of this use effect hook in the react WR version we cannot solve this in this video because it's not in our scope of this current video topic so let's convert in inside into this inline condition expression it goes like this we have to check for age then first is if age is more than 26 we will print console wait what is happening console. log let's print you in this quotes you are now old see we are printing this then we have else if where we are checking these two statements so we can press enter for second line you can write in the same line but I'm showing you for the clarity to show you the full code properly so here we are checking these two statements so let's check so then comes else if then again we have to check using question mark so again if this is true we will have to print something so we can say let me first add a fragment here then we can say say console do log so first console is this if this is true let me add okay let me copy and paste it here simply okay just let me copy it manually here in quotes then we have one more console. log the second console Nishant is my name save so see we are opening question mark here of and is closing here so again after that we have to use a colon just like this colon before then we have to check for else so we will do the same thing we will use a small bracket then a fragment so for multiple for printing multiple lines we'll have to use this but if you have single line you can simply use directory like this then we have to print these two statements Nishan is not my name let me copy simply and paste it here nant is not my name and I am less than 26 years old okay here what's happening what's happening now it's fine let me comment out this save so let's check using the condition AG is 26 fine name is Nishan so it goes into this block it will check the age so it's under six so this one is not true this one is false so let's write false here then it goes inside the second block else if this one it will check name is Nishan yes it's Nishant AG is this 26 yes it's 26 here we are using m% 2 m% it means it will check for both conditions both conditions so it will check for both it means though both should be true so this will print this thing now open the console to check so this makes this say true so write it true here and then it will not glow inside this block so we can write it as false so open the console let's save this and check refresh the page once we are getting this I am 26 years old and Nishant is my name so this is getting fulfilled let's change the condition here of sorry change the values so we can say let's say let's make this as let's make this name as UD fine and let's make the AG as something else or let's leave at 26 so let's save and check what we get so start from the start beginning AG is more than 26 no it's false still it's false second block it goes in it goes in it will check this name is Nishan no it's not Nishan it's UD there and the age is 26 this one is true but we are using and here so I said previously that if either of them is false it will not go inside this block the both should be true for this so again this should be this will be false then it goes inside here and will it will print this as true so now let's check so this one is false false third one will be true see we are getting this I am less than 26 years old and Nishant is not my name so it's fine now now let's see how to use or so this is condition this is checking for both conditions but what if you make it or so it will check either of them so if Nishant is name and AG is 26 so either one of them are true is true it will print second one save refresh the page it will see it's printing this let's make it as true so it's true and this one is again false fine refresh one more I will explain it's not more than 26 so it's false then it will come here name is Nishant not it's not Nishant it's there but the age is 26 so it will print this and it will not go inside this block so it will print second one so let's make the age to be something like more than 26 let's make it 28 then it will print this one you are now old save refresh so you have see we will get this message called you are now hold so now this first St bent is getting fulfilled so it's true now then it will not go inside this else if or else block so both will be false see so that's how turn operator or inline conditional expression Works let's say we had a third condition or third statement let's say something is married or something else then if you want to check it here you have to add it in this false block like this so let's say is married something if it is true we will have to print true or else we have to print or print what is whatever it is we have which is false I think I get I you get what I mean fine that's how turn operator or inline conditional Expressions works in react we can also use in HTML or jsx also here so let's check for sub condition so just copy all these things and add it here in curly bracket wait a sec past it but instead of console log we will print it in our H1 tag so we can say H1 let's check or let's add this here remove console log and leave the commment then in second one we can print or remove this and we can print H1 wait sorry didn't have to remove this H1 let's print this and for second one let's print this remove these things fine H and for the third one wait a sec we had two HTML tags okay and for the third one we have to print this so what can we do we have to print is fine so paste it here save and see the problem here is this age and name it's only inside the use effect hook scope but not coming here so let me move it outside also or just cut or copy and paste it here and then it will work see so age is 28 and name is there so it will go inside this block it will print this as true because yes the age is more than 26 28 26 it's 28 let me reduce it to 286 then let's see what it prints it will print this so let me make it an and so it's printing I am okay where it's okay we are okay okay wait sec Nishan is my name should be here we are printing same thing twice see now this is true so it's printing these two so this becomes true and this becomes false outside the use effect hook not inside the use effect hook so let me change the condition to something else let's make it as what is it the third condition is Nishan okay let's make it an M percent it will not follow because name is not Nishan and this will now check for both conditions name and age save you will see this I am less than 26 years old we are printing this and Nishan is not my name so this now becomes false and this now becomes true because the values have been changed here so that's how inline conditional expressions or operator works and react so what is event handling first so event handling or function handling is a method to call functions and event in react using some input or buttons on our using our actions so we can say cons let's create a function first let's say add nums we have a function that basically will add two numbers so let me create a button it will say add numbers save this button is here fine so if we want to do something like we have to add two numbers let's say console. log let's add two and two as four it will be four so let's say if this was this was simple HTML and JavaScript we have done something like this so on click C we have to open quotes sorry I cck equal to then quotes we have to call add nums and this bracket but this is not simple HTML and JavaScript it's jsx and react so this function will not add numbers let me show you what we have see this property is invalid we have to use this method so I once again so it will not work so instead of on click small on click we have to use this sorry let me remove this and let's use Capital camel case on click opening and closing cly brackets then add the functions here which is ADD nums nothing else just this see now if you click the button we will see for in the console see it's for now so that's how this works let me give you one more example using an input element let me create one input here input let's make the placeholder to be wait what I'm doing this placeholder should be uh add something save we have this input here now let's say we want a function to run every time we type something in the input so we can create a function to say const get input then we have to bind this function to this input if we are using HTML we will use on change event like this but not here this is not HTML we have jsx so we will use camel case on change and then we will simply pass get input here all the data that we type will be propagated here in this function get input so let me get the event from here so we can console do log our event do Target just let's make first event first the event that we are passing so type something let's say 1 2 3 4 see we are getting all the data from this event like all the data we want want the target so let's say event. Target do value the value of the target for this input so let's type something like 1 2 3 4 5 then we will get this input here similarly we have other things like if you just add event Target we will see something like this so let me add a name property here name of let's say input so we have three things placeholder on change and the name prop for this input fine so if we type something like 1 2 3 we will get the whole input here but we want the value so or the name so the value is you have seen how to get the value to get the name of this input we will say in event. target. name like this and if we type this input will be propagated here see this input so that's how event handling Works in react so one more thing let's me let let me show you what do we want to pass some values to this add nums function dynamically from the button we will use this it will be a function here we will call a function then add num function then we have to pass some propert some data let's say we want to pass two par parameters two and two then this will come here let's say num one and num two we are using comma to differentiate between them here also so this is one number it's second number let's make it three here so num one and num two then we can simply pass it in the console num one plus num two to get the input so let's add numbers and it's five C that's how we do it in react you have to handle events so have to array here of numbers and details number contains numbers from 1 to 10 and you see this detail contains the name and age of four people in an object so first let me map the numbers array and if you want to see how Map works you have to see my previous videos in the same playlist so we will have numbers do map let's say number it will return a list tag Li and here we will have to print all the numbers so this map will go over each and every item and it will print the number like this but see if you open the console What will what let's see what what we see we will see this error message that each child in a list should contain a key prop should have a key prop unique key property so in this case all the items are unique from 1 to 10 so to add Keys here to remove this error we will do key and then add the number here so now this key will take the number which is 1 to 10 so it will be unique and this message will not be here anymore so refresh the page see it is not here anymore so see this is the first scenario let me enter the second scenario where all the items or all the elements should be should should be not unique should be same so in that case what can we do so let me map this details first and we have a detail we will have detail here let me remove the key from here and this number add add detail and the place of number see refresh the page we will see this error that objects in objects are not valid as react child so we have to render it using keys okay fine the problem is we have to use the name first also that's this error name so this name is also key this name is a key let me add one more list here but we have to wrap them in a fragment because two jsx elements cannot exist without app parent so add it here add one more list tag this should be not name and age now we will see all the ages here let me commment this temporarily see we have all the names and ages open the console and they will see the same error for the keys refresh the page see we are saying this each child in a list should have a unique key prop but we don't have anything that's unique here let's say we have a name but name can be same for two people we have a age and this could be same as same as well so let me demonstrate this to you let me add a property one more property with the same name and age of CH age then we will try to add a key using the age let's see what we get so first make this a div and copy and paste it here then let's add the key prop and the key should be the age so detail. age see we will see that warning encountered two children with same key 29 Cas should be unique so that their components maintain their identity and all so we are getting this error so in this case we have two options first we can add one ID here so ID let's say one then here should be add IDs 2 and then three then four and then there at the last we'll have five then we can print the key as simply details id detail. id now this won't be here see it's not here anymore second thing is that if we don't have the IDS let me R it back or leave it let's say we don't have the IDS let me comment this okay Al alt alt alt alt Let Me Wait alt alt alt alt alt alt again alt alt Alt alt alt shift Aros space back remove all the IDS now see let's say we don't have the IDS in this current scenario therefore we can use an index property here so this map also returns one index that we can use as the key which will be unique throughout the array see not the error has been disappeared but this index thing is the last resort kind of thing so if we don't have the ID only then we have to use index or else add the IDS here in the array or in the object or in the API so that's how Keys Works in react and how to fix them so mainly the keys are called the name and age and in this case all the items are called keys fine so that's all about keys in react here I four input fields from name to name age hobbies and date and one empty error function first let's get data from the form inputs this is the first step so we will use an event called onchange event that will run when the input field value changes or we type anything in the input field keep that in mind so we will use this get input function in the on change event this will pass an event argument here in the function then we can simply console this thing this event so open the console let me type my name in the name field called Nishant see we are getting all this data here all the data most of which we don't need so to fix this or to like yes fix this we can only send the data we need directly so let's say event we can send let's say you want the value that we type which is Target dot value value we can do this here let me make the event to value and here as well now we will only get the data that we're typing the text so we can add Nishan here and we will get that so let me repeat this all over the first step is done I mean the first lesson for form now what can we do is let me so let I we added the onchange event here let me also add the name property so each of the input Fields will have a name so let's say this will be a name this should be the age this should be age age sorry not age let's say name this should be hobbies and this should be uh date so all of these now have a name as you can see fine let me also pass the name this will be event do Target do name like this so let me pass them all over so this name is also important I will show you why see now we have the name basically we passing two values here okay we are passing two values like value and the name so we have to deceive two values so name if we console the name here let's see what we get refresh the page we can say name as Nishant and if we type if you're typing in the name field this field we will get the corresponding name if it is age we will get the age see age we are getting and same for hobbies and date let me make okay fine now let me show you the types of the input fields we will can have the type prop and we can add text for the alphabeticals like Nishant or like if you want text here simply numbers and text I mean numbers and alphabets for the each this could this should only be a number so we can add the type as type as equal to number like this for the hobes so now this is a number and refresh the page see we cannot type alphabets here we can only type a number like this fine so for third one we can also add the text as same as the name because this should be a text as well but for the fourth one we can add the date type so we have so many types like input date color so let me show you let me add or let me just make this type as input this now will be a file upload thing type it is okay not input file file yes this should be a file upload thing so rever it back and let me remove this why so we have four fields and all of them have the type and the name with the onchange events so now let me console the value so console do log the name and value small value I mean value open the console or let me do it like this so make sure we have name colog and the value wrap it in a error like thing then it will not work okay okay okay let me wrap it in an object like this then this should be an arror like like like this so we will have the name paired with the value like a uh key value pairs so this name will be the key that we will store and the valueable the value that we will have so refresh let me add my name Nishant and see the name is the key and this Nishant is the value C fine now let me store them in an array sorry not an array let me store them in a object so if you want to show all the values or store the values State you can create multiple States for us we will have four states for name age hobbies and date but I will show you how to do it using only one state an object State you can because for example if you create four states then you have to assign all the four state and set States in all the unchange events which will be lendy so let me introduce you to a new method so we can say const let me create a state an object state so let's say obj data and set obj data in camell case so use State this will be an object just like this so we we will we will be keep storing all the data in an object yes wait what happened okay yes we'll keep storing all the object properties in the set object in the object data state so we have to store this in an variable first so let's say let data equal to just copy this whole thing cut and paste remove this now this data will contain our data like this so for example if we console the data here CLG console. log data let's see what we get refresh let me add the name called Nishant we are getting the name and the value like sorry we are getting the key name and the value Nishant here line number eight if we type the age 26 we will get the age only like this we are not getting the name anymore because it has been overridden by the age so we have to store this data in this set in this object data state so we can do small bracket then cly bracket then we will have to merge then so for example let's say we are storing this data here using using SP operator like this now we can console data the data outside like this now let's see what we get refresh the page so let me explain once more what I'm doing here we are merging the data using G value pairs in the data variable let data then we are storing the data as object in the set object state in the object data State I mean then we are consoling it here let me add my name called Nishant so it's here C so it's getting stored in the object data State successfully if we add the age the previous data will be overwritten like this we don't see the name anymore but we have the name in the input as well so to solve this we will have to add the data and then merge with the previous data so name will be the previous data so we'll merge it using like this triple dots then object data we will merge the both objects so the previous data now is called Nishant and the new data is called this let me start from the beginning let me add the new data which is Nishant and it's here in the console and the state of object data obj data now let's say you want to add the age now this Nishant is now the previous data and the age is now the new data let me add the age 26 and C they have been both merged together the previous data and the new data now this both properties like age and name they are the old data previous data and if you write the Hobbies this will be the new data so we can say let's say Hobbies is creating videos like this so now this is the old data like this is the Old State now and if we add the date here this will be the new state so all these three fields are in the Old State and this one will be the new state let me choose some date here 20 now we have the data as well and all these four are now in the old data which is object data so that's how it works that how we can minimize the code so what can we do now so see let's try to submit the form or let me yes so we can say we can create a function called const submit so we can use the submit function in two ways let's say you want to submit data and show in the console or send the data to an API so we can say console.log this object data we have a button here that can run the function on click event using on click event so we can say on click submit button submit function now let me try from the start write the name Nishant age 26 hobes let's say recording videos and the date from today's date click submit the data will be here in the console line number 13 here another method is not using this submit uh not using on event we can use on submit on a form tag here so rap all the inputs in a form tag like this this will also work so make the button inside as well so now all of these inputs will be inside this form or what we can do we can add the form outside the div because the design is breaking so let's check so let's check if it is working or not yes it's working so now in the form we have to use on submit event on submit and let me assign submit function here but still now it will not work because this button has to be a submit type so type should be submit so if you open the console now let me type the name age hobes and the date now click submit and see if you submit it's coming here but instantly it's getting disappeared so here what we have to do is we have to do a thing so let's say we have to send the okay so we have to do this so This should contain an event param or E then you can do event do prevent def prevent default to prevent the default function here so now click or just add the name the age hobes and the date now click submit it's here now it's not getting refreshed automatically if you just comment this and now click submit the form will be refreshed see that we don't want fine all right so we can add one more button here that can be used to reset the form let me also show you that reset and the button type will be reset if we click the button of reset the whole form will be reset add the name the age hobbies and some date now click submit it's here now let me click the reset button see all the data has now been reset so that was how to use react forms or forms in react so for example let's say we have three Fields here name age years of experience these three are simple but let's say we have like 10 or 11 inputs in that case if you want to get data how to do that we have to create let's say we have 10 inputs then we have to create 10 different States for 10 inputs for one for each input for example for name we have one one state for age we have one state for this we