如何在 React 的聊天应用中更新新消息？

Question

In a React Chat App, I want to display Sender's as well Reciever's messages. I have also displayed message only on submit, but, I want it to store it in sessionStorage and also other messages should be displayed. Problem is that other messages are getting updated on same message bubble. What could be appropriate solution?

MessageApp

const [textValue, setTextValue] = useState("");
  const [newTextValue, setNewTextValue] = useState("");
  const [showSenderMessage, setShowSenderMessage] = useState(false)
  const [showRecieverMessage, setShowRecieverMessage] = useState(false)

  const sendMessage = (e) => {
    e.preventDefault();

    setShowSenderMessage(true)

    if (textValue != "") {
      const newTextValueHere = textValue;
      setNewTextValue(newTextValueHere);
      setTextValue("");
    } else {
      return;
    }
  };

  return (
    <>

      {
        showSenderMessage ? (
          <div
        className="bubble-sender"
        style={{
          display: "flex",
          flexWrap: "wrap",
          justifyContent: "flex-start",
          width: "80%"
        }}
      >
        <span style={{ width: "20%" }}>
          <img
            src="https://cdn.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png"
            style={{
              height: "50px",
              width: "50px",
              border: "2px solid black",
              borderRadius: "50%"
            }}
          />
        </span>

        <span style={{ width: "80%" }}>
          {newTextValue}
          <br />
          <span
            style={{
              display: "flex",
              flexWrap: "wrap",
              justifyContent: "flex-end"
            }}
          >
            <small style={{ color: "grey", float: "right" }}>11:23 AM</small>
          </span>
        </span>
      </div>
        ) : null
      }

      <span>
        
        <form
          style={{
            position: "fixed",
            bottom: "0",
            marginBottom: "80px",
            width: "100%"
          }}
        >
          <div className="col-lg-10 mb-3">
            <div className="input-group mycustom">
              <input
                value={textValue}
                type="text"
                required
                placeholder="Send Message"
                maxLength="30"
                onChange={(e) => setTextValue(e.target.value)}
              />
              <div className="input-group-prepend">
                <button
                  type="submit"
                  style={{
                    color: "white",
                    display: "flex",
                    flexWrap: "wrap",
                    justifyContent: "space-evenly"
                  }}
                  onClick={sendMessage}
                >
                  Send Message
                </button>
              </div>
            </div>
          </div>
        </form>
      </span>
    </>
  );

Here is the codesandbox link for much clarity --> https://codesandbox.io/s/upbeat-montalcini-bpdsp

Answer 1

You can create an array of text messages and render them within the map. See below example.

const [textValue, setTextValue] = useState('');
    const [textMessages, setTextMessages] = useState([]);
    const [showSenderMessage, setShowSenderMessage] = useState(false);
    const [showRecieverMessage, setShowRecieverMessage] = useState(false);

    const sendMessage = (e) => {
        e.preventDefault();

        setShowSenderMessage(true);

        if (textValue !== '') {
            setTextMessages([
                ...textMessages,
                textValue,
            ]);
            setTextValue('');
        }
    };

    return (
        <>

            {showSenderMessage && textMessages.map((text) => (
                <div
                    className="bubble-sender"
                    style={{
                        display: 'flex',
                        flexWrap: 'wrap',
                        justifyContent: 'flex-start',
                        width: '80%'
                    }}
                >
                    <span style={{ width: '20%' }}>
                        <img
                            alt="blank profile"
                            src="https://cdn.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png"
                            style={{
                                height: '50px',
                                width: '50px',
                                border: '2px solid black',
                                borderRadius: '50%'
                            }}
                        />
                    </span>

                    <span style={{ width: '80%' }}>
                        {text}
                        <br />
                        <span
                            style={{
                                display: 'flex',
                                flexWrap: 'wrap',
                                justifyContent: 'flex-end'
                            }}
                        >
                            <small style={{ color: 'grey', float: 'right' }}>11:23 AM</small>
                        </span>
                    </span>
                </div>
            ))}

            <span>

                <form
                    style={{
                        position: 'fixed',
                        bottom: '0',
                        marginBottom: '80px',
                        width: '100%'
                    }}
                >
                    <div className="col-lg-10 mb-3">
                        <div className="input-group mycustom">
                            <input
                                value={textValue}
                                type="text"
                                required
                                placeholder="Send Message"
                                maxLength="30"
                                onChange={(e) => setTextValue(e.target.value)}
                            />
                            <div className="input-group-prepend">
                                <button
                                    type="submit"
                                    style={{
                                        color: 'white',
                                        display: 'flex',
                                        flexWrap: 'wrap',
                                        justifyContent: 'space-evenly'
                                    }}
                                    onClick={sendMessage}
                                >
                                    Send Message
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </span>
        </>
    );