Understanding Redux: A Beginner's Guide To State Management/

...

/

Chats Implementation Explained

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:

Press + to interact
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:

Press + to interact
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 content ...