In this video, we can see how to write the code for the message from component.
The Misskelley will be doing this by the end of the video, we can type a new message or we can send
an image on any attachment, like a video or any PDF through the through the message form that is presented
here so that we are going to be for the end of the video from here instead of message form after written,
something will do that.
So now that we import fuel state works, so we're using use instead to.
Import use step.
From the act, this is not often so.
These are the snippets that are presented in Visual Studio code, which helps that often.
That's why I recommend you to watch the record.
And then I'll be importing the.
I'll be importing few icons that are required from than to design icons that I installed in the first
videos.
Sen Outline.
Be careful with the spellings picture outline.
It should be Cap Camel getting basically banned, foreign camel getting more in Jerusalem.
From then design icons.
You can also use material you like, but in this way you'll be using and design icons.
And finally, what we have to do is.
So these are now basically the components are the objects that we've got that the engine provides us
with the default we can use.
These functions are companies that are developed by other developers.
Again, so no need to write again code for this and Mercedes typing attributes are functions to them.
We can use them already in many functions from Chocolate Family Act chapter.
That is a beauty of the Tottenham.
So once we are done with this, then we are opening the message from again.
Can the props?
So I'll be using this New Hope, the value set value.
So they're going to walk this line of that is that.
They're using the constant value and set value.
You see, it is a book that helps us to create or change values dynamically without reinventing the
front page.
So the components which uses this, this book only will read when the whole value changes.
So initially we are initializing with the ambition.
So the value of this value constant will be an ambition, and the set value is a method that can be
used to change the value of this constant value.
OK, so this is what you said does to basically change the value dynamic.
And then similarly, we can be structured our prop.
We'll be getting the whole of chocolaty.
And credentials.
Some props.
Now, after this, we have to render the like the input, right, so we will do that.
So instead of this, there will be returning a form.
But Glass as a message from.
That's.
So he'll be organizing this action.
And on click.
So when we submit the form on click to do some processing like like when we type the method and submit
it, then you should have to reflect that message in that outfit.
So I'm click on submit on submission of the form will be calling its given function.
That handle are really creating that in shortly.
So that's hard for me to read it.
So after that, we'll be getting input function.
Input.
A few attributes.
Painted agreements, so the class name will be message input.
Soledad will be send a message.
So value will be.
The Alaska project value.
So they just call this a good program, programming the value of all the inputs should be in the books
so that whenever we take something, that value keeps on changing constantly.
Only that input will be changing dynamically.
So this value we are giving to the drop of input.
On change on Jenny Baxter said the value added change and what has changed that is that it will use
this value method and then change the value whenever the input is changing.
And on it should be handled somewhat similar to the phone.
So once we are done with the but.
Now, the important thing is the upload button image button, the picture icon, so this should be done
right.
So we'll be writing the code for that.
Label.
Its general fund will be an uphill battle.
And in the span.
Picture outline.
So picture playing a class name.
I've picked one.
So the thing that we imported from the and design icons for the spine, also in our class name, probably
managed button.
So long as it is done, the Labor Party's done so after the labor again will take something, put this
in what is for the file.
So whenever they click on the image of something, we have to open our screen to upload the photo that
will be the next input.
And what type will be fine?
Multiple will be false, only one user can send one file, you can give it to the user can send many
friends, but who make it simple will be using this font.
It will be enough.
No, the button.
Style will be very in line with a JavaScript object.
This plan will be done.
So on change.
Handle not buying this.
So Handler will be a function that will be creating content, will be sending the barometer of this.
That means you are sending the image to this chart.
So after they put the final thing remaining is the bottom.
I will submit.
Glass demolition.
And I mentioned that we are Philippine.
We're using Nikon over it.
There's a small threshold, yet it should be capital is.
Now in this perfect Senate plan.
There is a campaign.
Last night, and then we have to close the bottom, we have to close the.
So once we are done, we are done with the basic return function that we have to show in the field and
then we are maybe doing some body part for handling those genius.
So first thing we have to do is handle change.
That should be a small patch.
This'll take the current event that is being generated at a function.
Involving the deficit, the value of the input, right?
Even not targeted, not value.
He's out to retrieve the value of that event.
So if you have any doubt, you can just log the event to see what the event contains, it will contain
a target in that article can contain the value.
And then they used typing should be true.
We will be sending its taping props and chartering.
So we're done with the handle change.
The next thing remaining is handle, submit and handle upload.
Now we have to and submit.
Version of the bad guy even.
And then we have to prevent.
So basically, their default behavior is that whenever we click on submit, it will refresh the homepage.
So the fact is interactive scrolling through different components, not the complete page, so it'll
be preventing the default of the event.
Even when they.
Voluntarily creating a fixed constant.
So if that excellent.
Excellent is greater than zero, then will be sending the message.
The send messages are a function that we got from the act, charting them and retaining the credentials
to chart it a group to see, which is to let the computer know which group it is and then the final
object will be next.
And then finally, we have to set the value to empty string so long as we send a message again, we
have to get a new MP from Christian Democrats will be visiting that benediction.
So no handles are many of them.
The last part, it had a lot of.
We're also going to be getting even.
We have to get the U.N..
And there is only one line of code.
We have to send the message and the the image of the emerging message, the attachment message.
The same thing, but he'll be returning the files.
Fans will be even.
Target.
But finds.
And the text will be empty.
So with the help of this line of work, we can send many members.
Then outline seems they send out language never used, but you didn't send out such a small audio.
So.
We have done a lot of management.
And I have that.
So the airport is ready for the message from.
You can see it one of the Web pages completed.
We have been told the message from an naftogaz will do that shortly.
So there's going to be this how to build the message from component handling the upload, submit and
handling changes using the standard looks and then the boiler plate HDMI port for farming input and
buttons.
So we are left with the log in form and then integrating the specified log in from adaptogens and finishing
the website.
So we are into the final part.
We are in the engine and we'll see definition of the log in form in the next steps in the next few.