Placeholder Image

Subtitles section Play video

  • in this video, you're going to be getting started with.

  • React from creating a skeleton.

  • React up all the way to building this reusable real world component, which is an auto complete tax box with suggestions that filter as you type.

  • So what is react?

  • React is a job script library created by Facebook for building user interfaces.

  • It allows you to build in combine reusable you I components, much like creating your own custom.

  • Html tax These components are declare it'd views which update as the data in your application updates i e.

  • They react to changes in your application state.

  • Hence the name of the library.

  • Enough background that's gets started.

  • You need a recent version of note for this to work, So if you haven't got that installed already, go and do that first.

  • When that's done in the terminal, I want you to type NPM.

  • Install dash G, create dash react dash app.

  • This will install and NPM package that creates bare bones.

  • React taps for you with all the wear pack configuration on required modules already set up for you so you can start coding straightaway.

  • After that's done installing, you need to do create dash react dash app in a space on the name of whatever you want to call you on you up.

  • Let's call it my dash.

  • First dash up on this will set up your new react up and install all the necessary dependence is that will take a little while.

  • Andi.

  • After it's done, you need to go into the directory that's just being created.

  • That's my first Uh huh.

  • On and you'll see here it's in store than NPM application for us.

  • It's created our bare bones react up on.

  • We just do an M.

  • P m start and this will.

  • This will compile the APP and run the Dev Server.

  • It's also in a moment going toe open.

  • Here we go.

  • It opens a browser window and runs the app in it for you.

  • That's very convenient.

  • Um, so it's still just loading is still probably compiling in the background.

  • And there we go on.

  • This is the bare bones react up.

  • Andi, you can see here it tells you to goto SRC at J s edit the code and save and it will all to reload.

  • So let's do that now to start off with.

  • We're just gonna fly through building a really simple component with react just as a taster after that will move on to the auto complete tax books, which is more useful but also more complex.

  • Open the code in an editor of your choice.

  • Ah, NDE.

  • Go to the SRC folder and then you want to go toe up Jess on this is the main top level up component that renders what we saw in the browser.

  • If you remember, there's this text here about getting started.

  • Let's just edit this and change it to say Hello world.

  • And if we save it and go back to the browser code re compiles hot reloads on, we get Hello World.

  • So now let's create our first react components on.

  • Then we'll be able to use it just like a custom HTML tag.

  • Really, we're going to make a component, which is a button on some dynamic text.

  • When you click the button, it's going to toggle hiding the text.

  • So in SRC, I want you to create a new file.

  • We're going to call it high double text dot Js.

  • We're going to import react from react.

  • Then we're going to export as default a new class on.

  • We're gonna call that high double text, and it needs to extend the reacts dot components class.

  • You give a constructor and the constructor takes an argument caused called props thes adjust properties for the components and they could be passed in like attributes are past two in HTML tags.

  • And we do just need to call super in the constructor passing through the props and super just calls the parent class constructor.

  • So it's cooling the reactor component.

  • Constructor thatjust ensures the classes set up properly.

  • Next, we have a very special function called Render.

  • Now, whatever gets returned from render is what gets rendered in the browser for this component.

  • So we're going to return some Jair sex.

  • It's called, which is XML within Java script.

  • On this dress, sex is just going to bay.

  • It did so it's just like doing HTML tags with the natural biscuit.

  • Really, it's going to be a div, and then we're gonna have a bottom on dhe or call it a struggle on DSS.

  • Um, just some hard coded text for now.

  • Now we have this component.

  • We can go ahead and imported into our app components.

  • So we open that foil on, We just import it import high devil text from height of all text.

  • Now we can use it pretty much like a custom html tag.

  • So if we go within this day of class name at content, we just go high double text like an html tak we save it on, Then we'll have a look and see how it looks in the browser.

  • And there we go.

  • We've got our button that does nothing At the moment on our text reacts elements can take arguments called props that are a lot like attributes for HTML tags.

  • So too, are Heidel.

  • Text will add one.

  • It's called text on As the Valley Justus a string we will put dynamic tax.

  • Now we go back to our components on that text prop will be available in the component within an object called this stock props.

  • It comes in violet constructor here and is passed to the super class.

  • So we want to out put this here on.

  • If you want to output the result of an expression in JSX, you just wrap the expression in curly braces That's completely wrong about the expression in curly braces.

  • So we're going to do this dot props, doc text on that will be the dynamic text we just passed in is the prop.

  • So if we save this and take a look in the browser, the text should have changed.

  • So as we can see, we've now got out Dynamic text on the bottom does absolutely nothing.

  • Let's fix that now.

  • Props are one form of data available to Iraq components their past in from outside the component, as we saw on our immutable.

  • But we can also store internal mutable data within a component on this is called state.

  • We will define this within the constructor so we'll go.

  • This stop ST on state is a special property on react components that has to be called ST and it's just a plain old job script object.

  • So we can just define it as an object literal, we will add on is hidden property defaulting to false.

  • So obviously if is hidden is true, the text will be hidden, otherwise it will be shown on.

  • We can achieve that by going down here and during not this stock state dot is hidden and props stop text this means the tax will only show if it's hidden is true.

  • Next we need a way to Tuggle is hidden.

  • So let's go up here.

  • Let's create a new method on the class called Toggle Ace Hidden.

  • I didn't take any arguments on this is going to use a special method which is inherited from the react stock component class on this is called set staked for reasons I won't go into now because it's beyond the scope of the video.

  • This thought state should never be altered manually after being initially set up in the constructor.

  • To recall this DOT set state on this takes function is an argument, and it gives us actually the current state as an argument to this function on.

  • Then this function has to return.

  • The changes we want to make to the state object in the form often object, so we'll return an object, and we want is hidden to bay the result of toggle ing.

  • The current is hidden so current state thought is hidden and again for reasons I won't go into now because it's too complicated for the moment, you must always you get the current value of any state object when you're doing a set state from current state, not from this thought state, you'll have to watch my entire react course to find out why.

  • I think it's a bit more complicated.

  • Put this talking.

  • His head and function will do exactly what we want.

  • Next comes the task of hooking.

  • Toggle is hidden up to this button here.

  • It's actually very simple.

  • It's a lot like in HTML and Java script without react.

  • How you would have how you would add.

  • Rather an event handler.

  • You just put it straight on is an attribute on Click.

  • In this case, it's going to be an expression.

  • So we want the curly braces again.

  • And then we just put a narrow function on.

  • All the Sarah function is going to do is call this Doc Tuggle is him.

  • Let's save that on Dhe.

  • Check this in the browser first.

  • I have just noticed a big error in Total is hidden.

  • I set The new value is hidden to be exactly the same as the current value, which is obviously wrong.

  • We want to negate it, so it's struggled on dhe now it should work, so in the browser we have the talk about and we have the dynamic text we click toggle on the text disappears, we talk again and it reappears.

  • So that's working as intended.

  • So what's happening here is when we initially render the button is hidden is false On dso the text is hitting and when we collect the bottom toggle is hidden is called set state is called and it sets is hidden to true Each time we update the state of react component the component rear enders So the render function is called again on So when we click for the first time in his hidden is set to true This function is then called again This time is hidden is true on DSO the text isn't shown Now we're gonna move on to building a more useful riel world component.

  • I'm going to be teaching you how to build this auto complete text box using react.

  • It's one of those text boxes we type and get a list of possible lightens you can select which fill in the tax box a bit like the auto suggestion search boxes on most search engines.

  • What I really like about this is that it has really a world uses.

  • It's a very simple component, but by creating it, you'll learn about reusable react components, props, component state and using CSS with react.

  • You'll first need to set up a new reacts up by installing, create, racked up, greeting you out with it on, then run it by going to the director in the terminal and doing MPM start.

  • Alternatively, you could just put the code within the app you previously created.

  • It's up to you.

  • I opened the curd in an editor.

  • We're going to create a new component.

  • First, create a new foil for your components and call its auto complete tax dot dress, and it should be in the SRC folder.

  • Components are the building blocks of any reacts application.

  • They can be configured using something called props more on that later in the series, and they can hold their own mutable data.

  • Called ST.

  • They could be used to represent anything in your your eye from small things like a standalone you in widget such as this auto complete tax box we're going to create right up until you something large, like an entire Web page.

  • Components are reusable, so you can use the many times on one page or even across different pages.

  • There also compose herbal.

  • You can think of them like Lego bricks.

  • You can fit them together to build other, larger components.

  • First, we need to import the reactor module.

  • You need to do this for every component you create.

  • Then we create a class to represent our components on.

  • We're gonna call it auto Complete Text.

  • It needs to extend the react dot component class in order to make it a component out Sex box will need the list of all possible lightens that it can order, complete with in the future video.

  • I'll show you how to make that configurable, but for now we're just gonna hard code a list of names to do this.

  • First, create a constructor react component Constructors must take an argument called props and called the super class constructor passing the props argument to it.

  • This just ensures the component is set up properly.

  • Let's add a member variable called items, so it's this store items and it's going to be an array.

  • We create a member variable so we can access it from anywhere in the class later.

  • So let's add some names now to the right, These will be what could be shown in the order.

  • Complete drop down there.

  • All the possible items to auto complete with now the mark up for our component at the heart of any react components is the render function.

  • It will examine all of the components data on based on this will render the mark up the component.

  • The idea is that when the components data changes, that markup changes.

  • So the user sees something different.

  • So we define our end of function From this, we must return the react elements.

  • We want to represent our components.

  • Some magic called J air sacs lets us write them directly written in Java script as HTML tax.

  • So we're going to return a rapid Dave on inside it a text inputs.

  • This is going to be our textbooks.

  • We're also gonna put on a kn ordered less toe, hold our water, complete suggestions.

  • We'll worry about showing only items that match the text entered later.

  • For now, let's show all the items in the list.

  • So we have.

  • This is an array.

  • So we've been just output and l i for each item in the items of rain.

  • Now, this is going to be an expression on dhe to mix expressions into our markup.

  • Using JSX, we need to wrap them in curly braces.

  • Anything within curly braces will be evaluated on dhe, the value output within our markup.

  • This could be anything from a simple string to the results of a function cool or even other react elements.

  • We want one ally per item in the list.

  • So inside those curly braces were goingto map over the array an output an ally for each item within the ally.

  • We have the item itself.

  • This itself is an expression, so is also wrapped in the curly braces.

  • The result of this map is an array of react elements.

  • Now, if we put an array of react elements within curly brackets, each element in that'll Ray will be rendered, although when nowhere near finished.

  • Yet I think this is a good time to check how our new components looks in the browser.

  • So far, we have our new components but haven't used it anywhere.

  • We can use the component just like a custom html tag.

  • The component itself is just the definition.

  • We need a new instance of this definition, which will be a react element.

  • Let's do that now.

  • So you want to go to address?

  • This is our main top level component flap on.

  • We're just going to delete all this.

  • We don't need that header section at all on.

  • We also want to go into index dot CSS and just put 50 pixels and margin at the top of the body.

  • Just so we've got a bit of space up there when we put our textbooks in.

  • So first we need to import our components module.

  • Andi, we're going to use the components just like a custom html tag.

  • So it's just auto complete text as an HTML tak.

  • So you should be running the app using NPM start in the folder in the terminal so that it will haunt relayed in the browser.

  • When you change the code, let's take a look.

  • As you can see, we have our textbooks on our list with all the names in it.

  • When the user types in the textbooks, we're going to need to know about it so we can filter the list so that only items that match what the user types are displayed.

  • We're also going to need the current tax which has been entered for the same reason.

  • So let's get that text now.

  • You cannot events two elements in react much the same way as you can in HTML.

  • So this text input has an on change event available.

  • So we had that on.

  • We're going to assign a function to it.

  • Since the function is an expression, we wrap it in curly brackets on all the functions going to do is take the event that has been generated on console dot log event dot target dot value or e dot target value.

  • Because is the event target is the element which is the target of event.

  • On the value is the value of the HTML text input.

  • Let's check mats in the browser, so we right click and choose in respect to open the developer consul on dhe, choose console from the tab above.

  • Then we type in the text field on as we do, you can see the text being output each time we change the value in order to only show items in the list that matched the text entered, we need to use the Component State component state is just internal data belonging to the current instance of the component.

  • Since it belongs to the current instance, you can have multiple versions of the same components on the same page at the same time on they each keep their own individual state.

  • So in this start items, we have all the possible items.

  • We will store the list of items which match what is entered in the tax box in the components state.

  • The state is initialized in the constructor.

  • It is just a plain old JavaScript object, but it must be called ST and must be on the current instance.

  • I on this as this is the property react dot component uses for the state.

  • It's like a property which is special to react.

  • So we're going to create this stop state, and it's going to equal a new object literal.

  • The list of suggestions will have a property called suggestions.

  • When the components is first created.

  • We want the suggestions to be empty, so let's go ahead and make it an empty array that's creative function toe handle, the user typing in the tax box.

  • We'll call it on texts changed and it's very important that it's an arrow function or this won't work.

  • If you don't understand why this is, you need to learn about function context in Java script.

  • The function will take the on change event as an argument will call it a.

  • Now let's go down to the UN Change attributes in the tax books on.

  • We're gonna add that function there.

  • We just put this dot on text change.

  • There's no brackets at the end.

  • We're not calling the function, just assigning it.

  • So we need to get the value from the event.

  • If the string is empty, we're going to want to make sure that the suggestions are empty as there's nothing to match on.

  • This case would happen.

  • For example, if the user types a single character and then deletes it now, you might think we empty the suggestions array by doing something like this.

  • Dot state DOT suggestions equals empty Ray.

  • That seems to make sense, doesn't it?

  • We just set the suggestions array on the state to be empty.

  • However, this would be the wrong way to update of value in the state.

  • The reason for this is that what gets rendered in the render function will probably depend upon the state now, in this case, it doesn't yet, but we'll be making render do this in just a minute.

  • The idea is, when you change the state, you change what gets rendered so that the component displays something different.

  • This is what makes react components dynamic rather than static.

  • For this reason, the component needs to know that the state has changed so it can rear ender cool render again on display.

  • The new version of the component to the user reactive component gives us a function is called Set State.

  • That does just this.

  • So it's this dot set state, and now this takes a function which will return an object with any state changes in it.

  • So any properties we want to change in the state going that object, the reason it takes a function that returns an object instead of just an object is beyond the scope of this video.

  • I do, however, talk about this in my you to me course, so we want to set their suggestions to empty rate, so the function just returns.

  • An object with suggestions as an empty array.

  • You don't need to return the entire state from this function, just the properties you want to change.

  • The else case is before the text isn't empty For this case, we're going to create a case insensitive reggae axe to test for matches in the items list that start with the text the user entered.

  • Next.

  • We're going to define the list of Max matching suggestions and put it in a constant on.

  • This is going to be defined as taking the contents off the items array, sorting it alphabetically and filtering it for items that match the record X we just created.

  • We don't need to update the state with the filtered list of suggestions, and actually, I've just thought of a better way of writing this.

  • So we're going to use lattes on define suggestions so it's mutable.

  • Amergen initialize it as an empty ray on def.

  • The length of the string entered is more than zero.

  • We set suggestions to be the filtered list of items, so we just need the records and now Andi, then the filtered suggestions in there as well.

  • And then after that, we just set suggestions in the state.

  • This does exactly the same thing.

  • It's just more concise.

  • Now we're only going to render the filtered list of suggestions instead of the full West.

  • I'm going to create a function to do this.

  • Which organs Cool.

  • Render suggestions.

  • So we d structure the suggestions from the state.

  • And if this list is empty, we don't want to show the UL element at all.

  • To do this, we can just return no from this function, anything that is no won't render anything to the browser.

  • So next is if it's not empty on DDE.

  • In this case, we want to copy and paste all the code from down here from the render function or cut and paste rather for the u.

  • L.

  • So we're gonna return that And we did not instead of mapping over the items array, which is sort of all the items that we have because we only want to output the suggestions, we change it to suggestions instead of items.

  • Then in the render function, we call render suggestions in the place off where we had the mark up for our u.

  • L.

  • So now what should happen is when I type in the tax box only items which match the value entered get shown, but we have an era.

  • V dot test is not a function.

  • It actually says There's two errors on the page, but they're both the same.

  • Let's just go and fix this now, so I've got things the wrong way around here.

  • I've done text value dot test instead of regular stop test, and I need to pass in the text value to the test function.

  • So just the wrong way around There you go back.

  • Try again.

  • Cannot read property Map of undefined again.

  • Just a small bug.

  • It's not this stock suggestions dot map.

  • It's just suggestions.

  • As we've already structured.

  • Third Time's a charm.

  • We're now getting everything filtered as I type.

  • What's happening is the suggestions are being updated in the state, as I type.

  • Each time they are, the components render function gets called again, and it only returns list with the matching items.

  • As this is what's in the state at the time, the function gets called, so we have our filtered list.

  • Next we need to make it so when we click an item on the list, it populates the text box with it.

  • To do this, we need to be in control of the value of the text inputs.

  • Now there are two types of controls in reacts or inputs, rather controls and uncontrolled.

  • Currently, this textbooks is uncontrolled.

  • This means the browser controls the value the user types on.

  • The text appears in the textbooks.

  • If we make our text box controlled, we control the value via react.

  • We make it controlled simply by adding a value problem on.

  • We'll set this now to an empty string.

  • So look what happens when we're in control of the textbooks.

  • Fire react.

  • I am actually now typing in the textbooks and nothing will appear.

  • We will have to set the value ourselves from within the component.

  • We will set the value of the text box using the components state.

  • To do this, we're going to add a text Property to the state on the value should just be an empty string.

  • Then we want to go down to our render function on.

  • We want to extract this text value from the state and then in our text box.

  • We're going to make that valley prop the text from the state.

  • So that's what goes in the textbooks.

  • Now we go toothy context change function on dhe when the textbooks valley changes, we want to set that value in the state as text.

  • Now, when we type in the tax box the value updates to select the item, we need a function to say a suggestion has been selected, so we're gonna go head on at a function suggestion selected.

  • It's going to take the value of the suggestion, which will be one of the items from the suggestion list as an argument.

  • We're then going to update the state, So the value the text box uses is the selected suggestion.

  • At this point, we're also going to wipe the suggestions list by simply setting it to be an empty array, as we don't want to still show it when the user has just selected an item.

  • Finally, we need this to fire when a suggestion is clicked on.

  • So we're going to go down to the ally for a suggestion item, and we're going to add an on click event handler on.

  • We're going to add an arrow function in there, and this is going to cool.

  • They're stopped.

  • Suggestion selected with the suggestion text for this ally, we should now be done and everything should work now is we type.

  • It filters the list, and when we make our selection, it populates the textbooks, So that's a success.

  • There are a number of ways to handle CSS and react today.

  • I'm going to show you the simplest you see here.

  • We have our app dot CSS file.

  • This came with create react up on.

  • Then if we go into our components, our app components, JavaScript fall, we import it just like we would a jobs get module, Not forgetting to add the dot CSS extension.

  • This part's very important now, looking in the browser on viewing the source, you go into the head section me, scroll down a bit, and there's this style tag here on within it, we see the contents of ap dot CSS.

  • What's happening here is that create react up has set up a Web pack low difference.

  • Which pack is a commonly used JavaScript bill.

  • It'll anyway, this loader is intercepting imports of files based on the dot CSS extension.

  • It is then adding code to add a style tag into the Web page, using Java script on putting the contents of all the imported CSS falls in here.

  • That's what happened with ap dot CSS.

  • So let's add our own CSS file.

  • So we had a new file for a CSS auto complete text dot CSS.

  • Within that, we're going to add a class or two complete text.

  • For now, we're just gonna put a width of 100% on it.

  • Next we go to our components on, we need to import water.

  • Complete text dot C.

  • S s Remember the dot CSS extension.

  • This now ensures that the CSS we wrote shows up in the head of the documents.

  • Just like without dot CSS, we can now apply the class.

  • We added to a react element.

  • So we're going to apply it to the rapid if now, one thing to know this is very important in JSX.

  • You can't just use the class attributes because it's a reserved word on job script.

  • We can't put just that.

  • Instead, we have to use class name uppercase on then.

  • But this acts just like the class attributes in HTML.

  • So we add our water complete text class in there.

  • Let's check that in the browser so we can go to the head on weaken seethe style has been added there.

  • Looking at the finished product, we can work out what we need to do in terms of styling.

  • Firstly, let's take the whip.

  • Since this is a reusable component, we want a flexible with.

  • I think the best way to achieve this is to make everything 100% with.

  • Then when someone uses the component, they can put in a fixed with container in order to dictate the final with off the component.

  • Now let's look at the border.

  • So we have a grave order with a drop shadow.

  • My first thought was to put a border around both the text input on the UL that appears with suggestions.

  • The main problem of this is that if we put a border and drop shadow on both elements, they would overlap at the bottom of the text input on the top of the you.

  • Well, the simplest solution is just that the container Dave has a border and a drop shadow, while the UL and text have none this way, when just the textbooks has shown the border wraps that when the suggestion list is also shown, it wraps both components.

  • So let's make those changes.

  • Now the width of our container is already 100%.

  • So let's add a new selector for the text input and give that a width of 100% two.

  • We then add a gray border to our container, and then we want to drop shadow on it, too.

  • So we had some code from that.

  • Now I just generated this with an online tool.

  • You can Google CSS book Shadow Generator and you'll find a similar tool on.

  • We take off the border from the input.

  • So we're going to go into our APP component now on Dhe.

  • We're going to wrap the tax box in a death with the class name of AP hyphen components.

  • Then we go back to app dot CSS and we do a selector for AP hyphen components.

  • As a class.

  • Andi, we're going to put some margin on the top of it because we just want to spit of space between the top of the browser on DNA component andan.

  • The margin the sides is going to be auto to center.

  • It's on.

  • We give a width of 600 pixels.

  • This is to constrain the size of our reasonable component from outside of the component.

  • So once we finish, that will save and have a look in the browser taking a look at this, we see that the text in the list is centered.

  • We want it left aligned.

  • Also, you want to get rid of those bullet points.

  • Let's do that now.

  • So I'm just going to give the entire Dev on Dhe also the input a consistent text style so they just look the same.

  • I'm now going to put in a new selector for the U.

  • L and with this style typeset tonight might get rid of the bullets.

  • Andi, I align the text to the left.

  • If we have a look at our elements, we can see the alignment is a bit off between the text input on the list.

  • And there's this funny thing going on with the right hand side off the tax box.

  • There's a couple of things going on here.

  • We need to use border box box sizing on it.

  • Otherwise, the text input can end up being more than 100% width of its parent.

  • But the text input on the list items should also have consistent padding.

  • Finally, there's also a small You probably can't see it, but there is a small gap between the top of the UL on the bottom of the text input that throws things off just a little bit.

  • This is caused by the new line between the two in the markup.

  • This could be fixed by using the before pseudo selector.

  • First, we'll take away all the margin on padding on the euro element.

  • We won't be needing that.

  • Then we're going to add a consistent margin on padding to both e ally and text inputs.

  • So we had a new selective Pioli put the parting in there on, then put the same padding on the text input on DWI neater.

  • Also, add to that box sizing and set it to board a box for the text input so it doesn't get more than 100% in with.

  • Finally, we're going to add a pseudo selector for our you.

  • Well, this is the before pseudo selector we're going to use and it just allows us to remove the white space before the you well s.

  • So we're going to send the content to be an empty string.

  • We also want to remove this blue highlighting when the tax boxes in focus.

  • This is very simple to do.

  • We just add outline, none to the text input.

  • Things are looking really pretty good now.

  • We actually do want a border at the top of the U.

  • L O just to separate it from the text input.

  • We also want to make the list of items look clickable.

  • We can do this by adding a cursor style and some hover styling to the your eyes.

  • So we add a border to the top for you.

  • Well, that's of course, one pixel solid gray onda.

  • We set cursor to pointer on the ally so that the cursor has a little hand on hover.

  • So it looks like a link, something we can click.

  • Then we're going to add a new selector on.

  • We're going to use the ha ve o pseudo selector on the Ally selector on dhe.

  • Then on Harvard, we're going to give all the allies a background, just sort of a light grey backgrounds on an underlying to emphasize this to the user.

  • Just emphasize that there selectable So, yeah, that all looks really good.

  • I want some good data for our suggestions.

  • So I'll get a list of all the countries in the world I Google for its and there's actually a text far for it on Get Hub, which is perfect.

  • So I click.

  • Few rule Andi.

  • I copy all of them.

  • You want the countries to be in a right, so I create a new module countries dot Js In SRC Onda we simply paste in the entire list and we're going to export it from the module as the default export.

  • I'm going to wrap it in back ticks so it could be multi line as opposed to, say, single double quotes and make sure there's no space at the beginning of the end of the back ticks.

  • And then I do a dot split on the new line character Andi.

  • This will make it an array, one line or country.

  • In this case per item, the module now exports an array of country names.

  • So if we go to our component, we have an array called this start items which contains the hard coded items names.

  • In this case, we need to transform this into a prop.

  • Props in react are a way to get data into a component.

  • In order to make it configurable, he passed props to react element just like an h TML Absolute.

  • So if we have looked at the text input down here, um, we used to props on that one is value one is unchanged.

  • So this is just how you get props into react element and you can see up here the props of past the constructor.

  • Um, we then pass into super and after that they can be accessed foreign object.

  • This stock props from anywhere in the class.

  • So we removed their start items from the constructor.

  • We don't need it anymore on dhe.

  • We use this bearable in the function on text change, where we filtered these items to get the suggestions based on what a user typed.

  • So let's d structure this stock props to get a proper called items, and then we use that in place of this start items.

  • Now we need to go to the AP component where we actually use the tax box on past in the countries as a prop called items.

  • First, we need to import our countries from the country's module we created.

  • Then we add items as a prop just like an attribute on, give it the value of countries in curly braces.

  • So now the tax box has our list of countries available.

  • But what happens if we wanted to add another tax box with different items on the same page?

  • We simply add another auto complete text attack.

  • This one will set the items to be.

  • An array of names were just hard.

  • Cody array straight in the curly brackets straight into the prop items.

  • We now have two auto complete text boxes.

  • They're a bit squished together, so let's just add a bit of space in here.

  • So now we've got to auto complete tax boxes on one page.

  • Each has its own internal state.

  • Both has its own list of items, so we've created a truly reusable component.

  • If you want to progress the building entire APs in react instead of just components, see the link to my course.

  • Learn reacting Redox from beginner to paid professional.

in this video, you're going to be getting started with.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it