title: this.state.messages is not a function
body: <p>I am writing a chat app in react and rest-api in php. However I am getting a this.state.messages is not a function error. How can I fix this. I am still new at react and php, so thank you for your help.</p>
  <p><a href="https://i.stack.imgur.com/w6GV5.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p><a href="https://i.stack.imgur.com/D7DoZ.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>This is how I get the data from rest-api and here is my code for rest-api</p>
  <pre><code>if ($_SERVER['REQUEST_METHOD'] === 'GET') {
      try {
          $query = $readDB-&gt;prepare('select id, username, text from tblmessages');
          $query-&gt;execute();
          $rowCount = $query-&gt;rowCount();
          $messageArray = array();
  
          while ($row = $query-&gt;fetch(PDO::FETCH_ASSOC)) {
              $message = new Message($row['id'], $row['username'], $row['text']);
              $messageArray[] = $message-&gt;returnMessageAsArray();
          }
  
          $returnData = array();
          $returnData['rows_returned'] = $rowCount;
          $returnData['messages'] = $messageArray;
  
          $response = new Response();
          $response-&gt;setSuccess(true);
          $response-&gt;setHttpStatusCode(200);
          $response-&gt;toCache(true);
          $response-&gt;setData($returnData);
          $response-&gt;send();
          exit();
      }
      // ...
  </code></pre>
  <p>also here is the code for react</p>
  <pre><code>class MessagePanel extends Component {
      state = {
          messages: [],
      }
  
      componentDidMount = () =&gt; {
          axios.get('http://localhost:8888/restapi/messages')
              .then(response =&gt; {
                  this.setState({messages: response.data});
                  console.log(this.state.messages)
              })
      }
      
      sendMessage = (mes) =&gt; {
          const headers = {
              'Content-Type': 'application/json',
              'Accept': 'application/json'
          }
  
          const data = {
              username: this.props.username,
              text: mes
          };
  
          axios.post('http://localhost:8888/restapi/messages', data, {
              headers: headers
          })
              .then(response =&gt; {
  
                  console.log(response)
              })
      };
      
      render() {
          return (
              &lt;div className=&quot;MessagePanel&quot;&gt;
  
                  &lt;Layout/&gt;
  
                  &lt;SidePanel users={this.state.usernames}/&gt;
  
                  &lt;DisplayMessages messages={this.state.messages} username={this.props.username}/&gt;
  
  
                  &lt;MessageBox sendMessage={this.sendMessage} username={this.props.username}/&gt;
  
  
              &lt;/div&gt;
          );
      }
  }
  
  
  render()
  {
      return (
          &lt;div className=&quot;DisplayMessage&quot;&gt;
              &lt;div className='message-container'&gt;
                  {this.props.messages.map(message =&gt; {
                      return (
  
                          &lt;Message key={message.id} text={message.text} username={message.username}/&gt;
  
  
                      )
                  })}
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  }
  
  export default DisplayMessages;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/9bz6n.png" rel="nofollow noreferrer">enter image description here</a></p>