Search⌘ K
Home
Courses
Understanding Redux: A Beginner's Guide To State Management

Chats Implementation Explained

Chats.js is used to handle each message itself. The text and is_user_msg is obtained as these are the two things we need to know for displaying each message.

We'll cover the following...

In the last lesson we wrote this implementation for Chats.js

components/Chats.js:

Javascript (babel-node)
import React, { Component } from "react";
import "./Chats.css";
const Chat = ({ message }) => {
  const { text, is_user_msg } = message;
  return (
    <span className={`Chat ${is_user_msg ? "is-user-msg" : ""}`}
      >{text}</span>
  ); 
};
class Chats extends Component {
  render() {
    return (
      <div className="Chats">
        {this.props.messages.map(message => (
          <Chat message={message} key={message.number} />
        ))} </div>
    ); 
  }
}
export default Chats;

Let’s go through this, step by step.

Firstly, have a look at the the Chats component. You’ll notice that I have used a class based component here. You’ll see why later on.

In the render function, we map over the messages props and for each message , we return a Chat component.

The Chat component is super simple:

Javascript (babel-node)
const Chat = ({ message }) => {
  const { text, is_user_msg } = message;
  return (
    <span className={`Chat ${is_user_msg ? "is-user-msg" : ""}`}
      >{text}</span>
  ); 
};

For each message that’s passed in, the text ...