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

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.