In the last reading, we saw how to build up my message component.
So I'm going to see how to build that better message that is pretty similar, but there is a small difference.
So in how to do that.
So the main message we can get if we get the message, but instead the message will be getting to props
like as you can see in the outfit, we'll be sending two props.
One of the messages one is the message and also the last message.
So we have to open and we have to get both of those props.
We're catching the last message as well as message.
So once we do that.
We have to build our new concern is first message by you, that means is that is the message.
The first method of that is that.
If you take that.
So check that if it is not the last message.
All.
The last.
Message, not send us user name.
And not a constant.
Message, not Senate, not in it.
So with this logic, if it is not last message or if the last message sent to the name is not equals,
the message sentences them, then it is that it is considered as the first message that certain children
are born as we perform.
Let also answer been bullied for something so whether we are checking whether it is the first message,
whether he was or not.
For now, once this is done, we can go to this, returned it and then we can have the message at all
last name.
As I say, I do not.
So now we have to check whether it is the first message by the user or not, if it is the first message
we have to put in a different way.
It is not in the first.
If it is not the first message, then will be did it in two different ways.
One is whether it is a major or not?
Or does the attachment a bit of simple plain text.
So do that if.
Is.
First message by use it, if it is true, then this after that an operator, the code will be performing
so articulate, which are the tentative.
So this deal can be set of clothing, no need to have more than that.
So yeah, this should return our David Glass name off message, our thought if the message has some,
if the message you use it has some logo are not, then it should have a style.
Style will be a JavaScript object, so we'll be using this.
The background image.
Is a complete new message.
We don't have the user before, then we should know which user is stopping the message, so we'll be
having a background image.
It will be a message, not Senator.
I don't imagine will be if the message of gender exists, then we'll be sending the United.
You are a I'll be using the doughnut operator.
You get the value of the message, don't send the message to send a drop of tough.
So you.
So with this.
No, if it is the first time headed by the user, the component is very.
And now, if it is not.
Then what we have to do, we have to return the two ways of methods, one is whether it is imminent
or whether it is not going to be.
So I'm writing a book for that.
The message has attachments.
Then this block of port offer offered an operator should look.
Attachments.
Well, don't say anything about that.
Message of attachments.
Northland.
In greater than zero.
If it is true, then we'll be rendering the image component like.
For the image, when we say email copy from the previous thing may be down to my image.
My message tonight.
Oh, yeah.
So they image will be the message about attachment violent will be the fine source will be the same
thing.
And all the message would be same as that information, but style will be something different because
this is their message.
We have to do it in some different manner.
We have to give some margin left and.
Margin live if it is first message by user.
Then we'll be giving four big sense.
And giving 48 pixels.
So, yeah, so this if that if that's the message we are using the this ternary operator will be using
the message.
If it is not the image, the message has no attachments, then we have to render the plain text.
That is all we can do it.
It is not then will be rendering a.
Nom. with the message, we can use the same for every.
So we have to change some styles that's.
It should be left.
And then margin.
All right, we did it in the background color.
Involved should be I'll give a support for that.
CBC, ABC.
Now for that, it should have a margin left.
It is first method by.
Then we leave for presents.
Of margin left.
Otherwise, you can simply have 48 victims.
And then we'll be rendering the message.
So I'll be doing their part.
You know, I think that the mission is.
So with this, we completed the bear message company.
So now we are done with the message, my message company and a message from.
We have also seen how to render their messages, whether it is only major plain text, and also to see
whether it is the first message by the user in that group or not to render it in the customized way
that we want.
So after completing this, I said they have to create the read receipts function in field.
And also the last thing that is remaining is the mind messages.
So message form and message from like, as you can see now here we have to have a set input bar where
we can send messages, start typing messages and the final step of that.
This is the login form.
So then see the remaining stuff in the next few days.