React: Props undefined when passed from Parent to Child Function Component

Question

I have an Chat application.

In the App.js function component I have a messages state initialized as an empty array.

    import React, { useState, useEffect } from 'react';
import './App.css';
import Sidebar from './Sidebar';
import Chat from './Chat';
import Pusher from 'pusher-js';
import axios from './axios';

function App() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:9000/messages/sync')
    .then(response => {
      console.log(response.data);
      setMessages(response.data);
    })
  }, [])

  // when function component loads, run the follow once
  useEffect(() => {
    const pusher = new Pusher('1693ef51485e86ca1e9f', {
      cluster: 'us2',
    });

    const channel = pusher.subscribe('messages');
    channel.bind('inserted', (newMessage) => {
      alert(JSON.stringify(newMessage));
      setMessages([...messages, newMessage]);
    });

    return () => {
      channel.unbind_all();
      channel.unsubscribe();
    };
  }, [messages])

  return (
    <div className="app">
      <div className="app_body">
        <Sidebar />
        <Chat messsages={messages}/>
      </div>
    </div>
  );
}

export default App;

Once messages are stored there, the messages state is passed down as props to a function component in Chat.js.

import { Avatar, IconButton } from '@material-ui/core';
import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined';
import AttachFileIcon from '@material-ui/icons/AttachFile';
import MoreVertIcon from "@material-ui/icons/MoreVert";
import InsertEmoticonIcon from '@material-ui/icons/InsertEmoticon';
import MicIcon from '@material-ui/icons/Mic';
import React from 'react';
import './Chat.css';

function Chat({ messages }) {
    console.log(messages)
    return (
        <div className="chat">
            <div className="chat_header">
                <Avatar />

                <div className="chat_headerInfo">
                    <h3>Room Name</h3>
                    <p>Last seen at...</p>
                </div>

                <div className="chat_headerRight">
                    <IconButton>
                        <SearchOutlinedIcon />
                    </IconButton>
                    <IconButton>
                        <AttachFileIcon />
                    </IconButton>
                    <IconButton>
                        <MoreVertIcon />
                    </IconButton>
                </div>
            </div>
            
            <div className="chat_body">
                {console.log(messages)}
                {/**messages.map((message) => {
                    <p className={`chat_message ${message.received && "chat_receiver"}`}>
                        <span className="chat_name">{message.name}</span>
                        {message.message}
                        <span className="chat_timestamp">
                        {message.timestamp}    
                        </span>
                    </p>
                }) */}
                
            </div>

            <div className="chat_footer">
                <InsertEmoticonIcon />
                <form>
                    <input placeholder="Type a message"
                    type="text"
                    />
                    <button type="submit">
                    Send a message
                    </button>
                </form>
                <MicIcon />
            </div>
        </div>
    )
}

export default Chat

However messages is undefined in Chat.

Where is the error? I've experimented with passing props to chat as:

function Chat (props) {
  {console.log(props.message)}
}

Nothing seems to work.

Answer 1

Check the spelling tripple sss - messsages in

return (
    <div className="app">
      <div className="app_body">
        <Sidebar />
        <Chat messsages={messages}/>
      </div>
    </div>
  );

Answer 2

It's quite possible that your request to localhost in the first useEffect hook is not returning a value with the response. Double check your console output on that. As written, it should be working.

If that seems perfectly fine, then I would say that you need to clear your build cache.