title: How to properly append records without replacing each other in reactjs
body: <p>I have some records in my database. The Code displays the first record on the table. When I want to append the second record to the first record via appendMore button. The second record displays the first record. Please how do properly append the second or the next to the first record. Here is my effort so far</p>
  <pre><code>import React from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  import &quot;./App.css&quot;;
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        persons: [],
      };
      this.appendMore = this.appendMore.bind(this);
    }
  
    componentDidMount() {
      const url = &quot;http://localhost/data/first_record.php&quot;;
      axios
        .get(url)
        .then((response) =&gt; response.data)
        .then((data) =&gt; {
          this.setState({ persons: data });
          console.log(this.state.persons);
          //alert(data);
          console.log(data);
        });
    }
  
    appendMore() {
      const url = &quot;http://localhost/data/second_record.php&quot;;
      axios
        .get(url)
        .then((response) =&gt; response.data)
        .then((data) =&gt; {
          this.setState({ persons: data });
          // const persons = [...this.state.persons];
  
          console.log(this.state.persons);
          //alert(data);
          console.log(data);
        });
    }
  
    render() {
      //const { } = this.state;
      return (
        &lt;div&gt;
          &lt;h1&gt;Contact&lt;/h1&gt;
          &lt;table border=&quot;1&quot; width=&quot;100%&quot;&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;th&gt;id&lt;/th&gt;
                &lt;th&gt;Name&lt;/th&gt;
              &lt;/tr&gt;
  
              {this.state.persons.map((contact, key) =&gt; (
                &lt;tr key={key}&gt;
                  &lt;td&gt;{contact.id}&lt;/td&gt;
                  &lt;td&gt;{contact.name}&lt;/td&gt;
                &lt;/tr&gt;
              ))}
            &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;span onClick={this.appendMore}&gt;Append More&lt;/span&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>