如何打印多条消息但只有一个聊天应用程序的用户名

Question

I want to create a messager app that looks exactly like messaging using an iphone. By that I mean that I want the username to be shown each time a new person writes something but if the person keeps writing, the username will not repeat itself, it will only create a new messager bubble (just like it looks when messaging using an iphone etc). I have tried to use map to acheive this but its not working. Does anyone know how I can write this?

This is my code so far. Does anyone know how I should write it instead?

import React, { useState, useEffect } from 'react'
import axios from 'axios'


export const GetMessages = () => {
  const [userMessage, setUserMessage] = useState([]);

  const user = window.localStorage.getItem('Name')

  const fetchResponse = async () => {
    try {
      const getResponse = await axios.get(
      'http://167.172.108.61/?storage=camilla_lofroth'
    )
    console.log(getResponse.data)
    setUserMessage(getResponse.data)
    } catch (error) {
      alert('Error')
    }
    return[]
  }  
  
  useEffect(() => {
    fetchResponse()
  }, [])
  
  console.log(userMessage)

  return (
    <div>
      <div>
        <p>{user}</p>
      </div>
        {userMessage.map(message => (
        <p>
          {message.user !== null && typeof message.user === 'object'? message.user.mess: message.user }
          {userMessage.map(message => (
          <p>
          {message.message !== null && typeof message.message === 'object'? message.message.mess: message.message}
          </p>   
        ))}
        </p>
        ))}
    </div>
  )
  }

Answer 1

I actually did something similar to this not too long ago (smaller gaps for same user messages): http://astral-chat-app.herokuapp.com/

Edit: Based on your state, to render a username once per set of messages, your return should be:

return (
    <div>
      {userMessage.map((message, index) => {
        return(
          <div key={Math.random() * 1000000000}>
            {index > 0 && message.user !== userMessage[index-1].user 
              && <h3>{message.user ? message.user : "Unknown"}</h3>
            }
            <p> {message.message} </p>
          </div>
        )
      })}
    </div>
  )