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

Chats Implementation Explained

Explore how to implement the Chats component in a Redux-based React app by mapping messages, using conditional classes to distinguish user messages, and understanding JSX rendering for chat interfaces. Gain insight into structuring chat data and preparing for styling in chat applications.

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 ...