title: Fetching a data text from API response and presenting it in a chat with React
body: <p>I have a chat UI in react in which the user should input text and receive some data from an API response service. The UI works fine and the user text is presented in the chat but the response from the API which received in JSON format doesn't presented in the chat at all (not even an error message from the API, which should appear in the 'message' field,which is the same field where the result should be presented).As far As I know I configured everything ok, I don't know if something is messing in the render method though.</p>
  
  <p>Note: the preconfigured messages at the chat state in the beginning are just for testing purposes.</p>
  
  <p>The Fetch operation in under the componentDidUpdate() method at the first block of code that I posted.</p>
  
  <pre><code> import React from "react";
  import ReactDOM from "react-dom";
  import "./App.css";
  
  import Message from "./Message.js";
  
  class Chatroom extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
  
        chats: [
          {
            username: "clientUser",
            content: &lt;p&gt;Hello World!&lt;/p&gt;,
            img:
              "http://***.jpg"
          },
          {
            username: "user2",
            content: &lt;p&gt;Hi,my name is user2.What's up ??&lt;/p&gt;
  
          },
          {
            username: "user3",
            content: &lt;p&gt;Hi,my name is user3.What's up ??&lt;/p&gt;
          },
          {
            username: "user4",
            content: &lt;p&gt;Hi,my name is user4.What's up ??&lt;/p&gt;
          },
          {
            username: "userN",
            content: &lt;p&gt;Hi,my name is userN.What's up ??&lt;/p&gt;,
            img: "http://***.jpg"
          },
          {
            username: "user5",
            content: &lt;p&gt;Hi,my name is user5.What's up ??&lt;/p&gt;
          },
          {
            username: "user6",
            content: &lt;p&gt;Hi,my name is user6.What's up ??&lt;/p&gt;
          },
          {
            username: "user7",
            content: &lt;p&gt;Hi,my name is user7.What's up ??&lt;/p&gt;
          }
        ]
      };
  
      this.submitMessage = this.submitMessage.bind(this);
    }
  
    componentDidMount() {
      this.scrollToBot();
  
    }
  
    componentDidUpdate() {
      this.scrollToBot();
  
  
      fetch(
        "https://****",
        {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
  
          },
          body: JSON.stringify({
            inputText: &lt;p&gt;{ReactDOM.findDOMNode(this.refs.msg).value}&lt;/p&gt;
          })
        }
      ).then(response =&gt; response.json())
        .then(parsedJSON =&gt;
          parsedJSON.results.map((
            user
          ) =&gt; ({
  
            username: "BotResponse",
            content: `${user.message}',
            img: "http://***.jpg"
          }))
        )
        .then(chats =&gt;
          this.setState({
            chats
          })
        )
        .catch(error =&gt; console.log("parsing failed", error));
  
  
    }
  
    scrollToBot() {
      ReactDOM.findDOMNode(this.refs.chats).scrollTop = ReactDOM.findDOMNode(
        this.refs.chats
      ).scrollHeight;
    }
  </code></pre>
  
  <p>The submit message method:</p>
  
  <pre><code>submitMessage(e) {
  
          e.preventDefault();
  
  
  
  
          this.setState(
            {
              chats: this.state.chats.concat([
  
                {
                  username: "clientUser",
  
                  content: &lt;p&gt;{ReactDOM.findDOMNode(this.refs.msg).value}&lt;/p&gt;,
  
                  img: "http://***.jpg"
                }
  
  
              ])
            },
            () =&gt; {
  
              ReactDOM.findDOMNode(this.refs.msg).value = "";
            }
  
          );
  
  
        }  
  </code></pre>
  
  <p>The render method:  </p>
  
  <pre><code>  render() {
  
      const username = "clientUser";
      const { chats } = this.state;
  
      return (
        &lt;div className="chatroom"&gt;
          &lt;h3&gt;
            Title
          &lt;/h3&gt;
  
          &lt;ul className="chats" ref="chats"&gt;
            {chats.map((
              chat //Defines message component
            ) =&gt; (
              &lt;Message chat={chat} user={username} /&gt;
            ))}
          &lt;/ul&gt;
          &lt;form className="input" onSubmit={e =&gt; this.submitMessage(e)}&gt;
            &lt;input type="text" ref="msg" /&gt;
            &lt;input type="submit" value="Submit" /&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Chatroom;
  </code></pre>