ReactJS ES6 adding logic to the component - ecmascript-6

Question

I have a chat feature and I'm trying to display an array of messages into my JSX code with a conditionally rendered className depending on a value in an object.
I'm really new to ES6 and React and I cannot figure how to go about this logic inside the JSX. I am using redux to map my state into props. For brevity, I've cut the code into its simplest form.
class ChatWidget extends Component {
render() {
return (
<div className={chat.body}>
{/* if from_id == 1 */}
<div className={chat.float-right}>
<p> {/* message of from_id==1 */} </p>
</div>
{/* else */}
<div className={chat.float-left}>
<p> {/* else message here */} </p>
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
messages: state.messages
};
}
Here is my sample JSON array.
[
{
msg_id: 1,
to_id: 1,
from_id: 2,
message_id: "Marzipan jelly-o croissanty"
},
{
msg_id: 2,
to_id: 2,
from_id: 1,
message_id: "Jelly sw"
}
]

Answer 1

You can use your messages array to create an array of JSX elements which can be used in another JSX expression for rendering.
Since you want the message with from_id == 1 to appear first you can use Array#sort to order the messages array (to avoid mutating messages a shallow copy of the array is made using Array#slice).
You then then call Array#map on the newly returned array to iterate through the sorted messages creating new JSX on each iteration.
The code could look something like this:
class ChatWidget extends Component {
render() {
// deconstruct messages from props
const {messages} = this.props;
// Mutating data should be avoided and Array#sort mutates
// the array so we use Array#slice to create a
// shallow copy before we sort it
const msgCopy = messages.slice();
// sort messages so message where from_id === 1 is first
const sorted = msgCopy.sort((a,b) => {
return a.from_id - b.from_id;
});
// iterate through sorted array to create
// an array JSX elements
sorted.map(message => {
const {from_id, message_id} = message;
// Change class if from_id is 1
const classToAdd = (from_id === 1) ? ('chat.convo + ' ' + chat.them'):('chat.convo');
return (
<div className={classToAdd}>
<div className={chat.text}>
<p> { message_id } </p>
</div>
</div>
);
});
// use sorted array as follows to create a div containing
// a child div for each message
return
(
<div className={chat.body}>
{sorted}
</div>
);
}
}
function mapStateToProps(state) {
return {
messages: state.messages
};
}