AI Features
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:

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

Ask