In the previous video, we have seen how to build a chart feed that basically we have created that message
US function and rendered all the messages using the props that we get from the React chat engine.
So one little thing that is left here inside the city is we have to create a leadership function, which
we'll do later.
So now our interest is building this message and better messenger components.
The first thing in my message our component.
Inside, when we are going into this mindset, as you can see inside my head, Chatfield, then we are
calling this my message.
We are sending some proof.
That is the message from so now we have to catch them properly over here.
So I'll catch the message from.
So once we get all of the message from.
Now I want to see whether the message is an image or not, if it is image after another thing, another
way, if it is a picture and render it in another, it's so hard to check whether it is image or not.
The fact that we can use that if condition, if message, not attachments.
So basically, the media's going to be in the form of attachments to the message, if this is true,
if the message that attachment is not zero, if it is greater than zero, then.
And so what this and it is that and operator, if this is true, then only little check the next statement.
So basically finished with of following proceed to the next statement.
So this is maybe like logic.
Message, not attachment that is greater than zero.
Length.
It's better than zero.
So we're checking whether the images I've made zero eight is a major part of, whether it is a PDF or
whether it is a media we don't know.
Checking the length of the images that we are sending, we may just two images, maybe more so if this
condition holds, then we have the redundant image.
So returning the images, audio images, they're basically the, you know, it is a basic and that in
the premium part in Belgium alone.
So, yeah, we can give it some attributes, so the source will be message attachments.
Not fine.
So this is how we can get the source of dementia inside the message.
We can go to the attachment.
You can access that attachment.
And if there are more attachments, it will be added.
So we will be getting the first element of that attachment and then the file will give the location
of that attachment inside a local system.
So I'll be giving all the prop.
So in simple language, these called as attributes are pretty inbuilt HDMI detect if it is a customized
HDMI, detect them, we call them as props.
So that is the simple difference, and that is how we have to remember.
And you give a message attachment.
If for some reason it is not rendering, the immediate should give a message, so no users should know
it should be user friendly.
I'll be giving a last name.
Men will be message.
Image.
After that, we can give us time.
So it.
Flawed, right?
So this styling that is basically implicit and as you can.
See which style suits the type you like.
User interface by simply trying and editing.
So with this, we completed the image, but.
So now, if it is true, then it will return this image, if it is not true, then it will does not
point to the block knife block and relatively written the statement.
So what we have done, we have to return the messages, OK?
Our message is not the images, but the image this will perform.
If it is not an image, then we have to return that message.
So we'll be giving up plus name called message.
Style will be.
Float to the right.
Margin, right, will be 18 pixels.
18 pixels.
Color will be white.
And then finally, the background of.
We'll be giving her hash four three two five zero.
Three men with five zero.
So.
So with this now inside there, we have to return the message, not text.
The next president can send the message.
So now we have completed the message component, but next, we'll see how to render their message.
So this will be similar to my message, like rendering it as an attachment and then rendering it in
a different way.
If it does not have an attachment, rendering the message itself.
So we'll see how to do that in the next few.