reactJS using moment, the date time is the same

react

#1

i was trying to build a chatapp, but i have a bit of a bug. reactJS or moment (datetime library) is displaying the last datetime for each message, while it should display different datetimes. Here is MessageList.jsx:

class MessageList extends Component {
    render(){
        return (
            <ul>
            {
                this.props.messages.map(message => {
                    return <Message
                        message={message}
                        key={message.id}
                        {...this.props}
                    />
                })
            }
            </ul>
        )
    }
}

MessageList.propTypes = {
    messages: PropTypes.array.isRequired,
}

export default MessageList

messages is an array with the different messages:

[{author: "test"​​, body: "hello world"​​, channelId: "720bba8a-18d2-470f-833b-276ff8994f62"​​, createAt: "2018-03-25T13:22:04.699+02:00"​​, id: "97dfd49c-c613-4f3a-883f-afabca144f0a"​​},{author: "test", body: "hello there", channelId: "720bba8a-18d2-470f-833b-276ff8994f62", createAt: "2018-03-31T14:02:58.23+02:00", id: "ca9e0695-7602-4ae8-85fa-b366b61980af"}]

and Message.jsx itself:

class Message extends React.Component {
    render(){
        let {message} = this.props;
        // i suspect the bug is caused on the line below, not sure why though. 
        let createdAt = moment(message.createdAt).format('DD-MM-YYYY HH:mm:ss')
        return (
            <li className='mesage'>
                <div className='author'>
                    <strong>{ message.author }</strong>
                    <i className='timestamp'>{createdAt}</i>
                </div>
                <div className='body'>
                    { message.body }
                </div>
            </li>
        )
    }
}

Message.propTypes = {
    message: PropTypes.object.isRequired,
}

export default Message

Any help would be much appricated


#2

Just from a quick observation. from your data you provided your message doesnt have a property createdAt. It has a property createAt. In line 5 of your Message class you have “moment(message.createdAt)” , but then again i’m not sure if this is the direct problem because i would be surprised if you would get any result.


#3

Are commas not required?


#4

After further investigation into “moment”, i read moment(undefined) returns the current date (i.e. equivalent to moment()), so i’m assuming my first reply is reason why to your answer.


#5

that is a copy paste mistake, sorry.

@sweezed, thank you. that solved the problem.

yes, it is. Thank you you so much! :slight_smile:

now i do feel really stupid, i had a spelling mistake in there before as well :frowning: