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

The Header Component

Explore how to render the Header component within your chat application by retrieving the active user's data from the Redux store. Learn to pass activeUserId as props and map it to the contacts state to display user-specific details dynamically.

We'll cover the following...

Let’s begin with the Header component.

The current content of the chatWindow component is this:

Javascript (babel-node)
import React from "react";
const ChatWindow = ({ activeUserId }) => {
  return (
    <div className="ChatWindow">Conversation for user id:
      {activeUserId}</div>
  ); 
};
export default ChatWindow;

Not very helpful. Update the code to this:

Javascript (babel-node)
import React from "react";
import store from "../store";
import Header from "../components/Header";
const ChatWindow = ({ activeUserId }) => {
  const state = store.getState();
  const activeUser = state.contacts[activeUserId];
  return (
    <div className="ChatWindow">
      <Header user={activeUser} />
    </div>
  );
};
export default ChatWindow;

What’s changed?

Remember that the activeUserId is passed as props into the ...