How to append react element div dynamically?

Question

Everytime an object is received from server-side socket, a new div element with a message inside must be appended to the DOM.

Instead the div element is being overwritten again and only one div element is produced.

  state = {
    chatMessage: ''
  }

  componentDidMount() {
    socket.on('retrieve-chat-left', (data) => {

      var message = data.map(data => {
        console.log(data.name, data.message);
        return <ChatListLeft key={data._id} name={data.name} chatMessage={data.message} />
      });

      this.setState({
        chatMessage: message
      });
    });

  }

  render() {

    return (
      <div className="mainbodybar">
        {this.state.chatMessage}
      </div>
    )
  }

// ChatListLeft component

import React from 'react'

export default function ChatListLeft({ chatMessage, name }) {
  return (
    <div className="retrieve-chat-left">
      {chatMessage}
      {name}
    </div>
  )
}

Clarity · Accepted Answer · 2019-09-10 09:49:10Z

6

You're overwriting your messages instead of appending to them. Also instead of saving a component to state, it's better to save the data and then render it:

  state = {
    chatMessage: [] // chatMessage should be an array
  }

  componentDidMount() {
    socket.on('retrieve-chat-left', (data) => {

      var message = data.map(data => {
        return {id: data._id, message: data.message, name: data.name}
      });

      this.setState(state => ({
        chatMessage: [...state.chatMessage, message] // Append the messages to the state here
      }));
    });

  }

  render() {
    const messages = this.state.chatMessage.map(msg=> <ChatListLeft key={msg._id} name={mag.name} chatMessage={mag.message} />
    return (
      <div className="mainbodybar">
        {messages}
      </div>
    )
  }

answered Sep 10, 2019 at 9:49

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mahesh · Accepted Answer · 2019-09-10 09:48:56Z

0

Do below concatenate it with existing value,

  this.setState({
    chatMessage: this.state.chatMessage + message
  });

answered Sep 10, 2019 at 9:48

Mahesh

8731 gold badge14 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to append react element div dynamically?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related