I tried a lot of things but I'm a beginner in ReactJs and I think It's a simple problem but I can't manage to fix it . I'm using a stateless component because I need to use the function useParams().
I need to loop on my messages so I used Object.keys(messages).map( (key) => (...
But it seems that it doesn't take the proper key because this is what I see on my chrome info on the component :
App -> message key = 'messages'
props message: undefined
pseudo: undefines
My code :
import React, {useState} from 'react'
import './App.css';
import Formulaire from './components/Formulaire';
import Message from './components/Message';
import {useParams} from 'react-router-dom'
function App () {
const [messages, setMessages] = useState({})
function addMessage (message) {
messages[`message-${Date.now()}`] = message // permet d'avoir un TimeStamp unique pour chaque message
setMessages( messages )
}
const {pseudo} = useParams()
const mess = Object.keys(messages).map( (key) => (
<Message
key={key}
message={messages[key].message}
pseudo={messages[key].pseudo} />
))
return (
<div className="box" >
<div>
<div className='messages'>
{mess}
</div>
</div>
<Formulaire length= {150} pseudo= {pseudo} addMessage = {addMessage} />
</div>
);
}
export default App;
Mes versions
"name": "chat-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"firebase": "^9.6.11",
"prop-types": "^15.8.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-transition-group": "^4.4.2",
"web-vitals": "^2.1.4"
Here is a link to a sandbox for my probleme (that is no messages are appaearing) https://codesandbox.io/s/chat-app-7e2dmw?file=/src/App.js
EDIT : the problem seems to be that the addMessage and the const mess are read on at the refresh of the page and not all the time. Do you know where to put them ?
I think that what is causing you an issue is the way you set your messages.
First, from what I learnt you shouldn't manipulate states values directly unless you are sure of what you are doing. In this case, it seems just fine.
Secondly, you are setting an Object containing your messages object by typing setMessages({ messages }) and this is why your key becomes messages.
You end up with an object like:
{
messages: {
message-timestamp : {},
message-timestamp2 : {},
...
}
}
What you must be trying to do is setMessages(messages) to get:
{
message-timestamp : {},
message-timestamp2 : {},
...
}
The problem here for showing the message is that you are assigning wrong variable to the state:
function addMessage(message) {
messages[`message-${Date.now()}`] = message;
console.log("message", message); // permet d'avoir un TimeStamp unique pour chaque message
setMessages(message);
}
message is the variable containing datas you need