How to solve TypeError: Cannot read property 'map' of undefined problem in react?

Question

Hello i am beginner in reactjs.Here i am trying to pass messages arrays to one of the components called Message-List.I am doing so using this.props.messages.map().However i am getting an error saying TypeError: Cannot read property 'map' of undefined.

import React, { Component } from "react";
import ChatKit from "@pusher/chatkit";
import MessageList from "./component/Message-List";
import RoomList from "./component/Room-List";
import MessageSend from "./component/Message-Send";
import CreateRoom from "./component/Create-Room";
import TypeMessage from "./component/Type-Message";
import "./App.css";
import { tokenUrl, instanceLocator } from "./config";

class App extends Component {
constructor() {
super();
this.state = [
  {
    messages: []
  }
 ];
 }
 componentDidMount() {
 const chatManager = new ChatKit.ChatManager({
  instanceLocator,
  userId: "1",
  tokenProvider: new ChatKit.TokenProvider({
    url: tokenUrl
  })
  });

  chatManager.connect().then(currentUser => {
  currentUser.subscribeToRoom({
    roomId: 19379359,
    hooks: {
      onNewMessage: message => {
        console.log("message:text ", message.text);
        this.setState({
          messages: [...this.state.messages, message]
        });
      }
    }
    });
  });
   }

   render() {
    return (
    <div className="App">
    <RoomList />
    <MessageList messages={this.state.messages} />

    <CreateRoom />
    <TypeMessage />
    <MessageSend />
     </div>
     );
    }
   }

  export default App;

And this is my component message-list where i am trying to import the messages array from App.js but its throwing error.

  import React from "react";


  class MessageList extends React.Component {


   render() {
   return (
   <div className="message-list">
    {this.props.message.map((messages, index) => {
      return (
        <div key={index} className="message">
          <div className="message-username">{messages.userId}</div>
          <div className="message-text">{messages.text}</div>
        </div>
      );
    })}
   </div>
    );
    }
    }

    export default MessageList;

Answer 1

Your inital state is array. You need change it object

this.state = [
  {
    messages: []
  }
 ];

change it to

this.state = {
    messages: []
  }