Search⌘ K
AI Features
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, ...