title: Reactjs: add more data to the state including previous data
body: <p>When I call the API it returns me 2 posts. When I call again it returns another 2 posts. But when i click the button for 2nd time, the first 2 posts removes automatically. <strong>It should contain both the previous 2 posts and the next 2 posts</strong>. How to do this?</p>
  <p>my code:</p>
  <pre><code>//...existing code
          this.state={
              status:[],
              counter: 0,
              pageNumber: 1,
          }
      }
      componentDidMount(){
          let store = JSON.parse(localStorage.getItem('login'))
          var url = 'http://127.0.0.1:8000/myapi/allpost/?format=json&amp;page='+this.state.pageNumber
          fetch(url,{
              method:'GET',
              headers: {
                  'Content-Type': 'application/json',
                  'Authorization': 'Token '+store.token
              }
          })
          .then(res=&gt;res.json().then(result=&gt;{
              this.setState({status: result.results, pageNumber: this.state.pageNumber+1})
              //this.setState({status:[...this.state.status ,result.results]})&lt;--didn't work
          }))
      }
      
      morePosts=()=&gt;{
          this.componentDidMount()
      }
  
      render() {
          if(Object.keys(this.state.status).length){
              var list = this.state.status
              const s = list.map((l,i)=&gt;{
                  return(
                      &lt;Status key={i} body={l['body']} id={l['id']} /&gt;
                  )
              })
              return (
                  &lt;div&gt;&lt;br/&gt;
                  &lt;div&gt;
                      &lt;div key={this.state.counter}&gt;{s}&lt;/div&gt;
                      &lt;button onClick={this.morePosts}&gt;See more posts&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
              );
          }else {
              return (
                  &lt;div&gt;
                  &lt;br/&gt;
                      &lt;p style={{textAlign:'center'}}&gt;loading...&lt;/p&gt;
                  &lt;/div&gt;            )
          }
      }
  }
  
  export default Home;
  </code></pre>
  <p>here is my API:</p>
  <pre><code>{
      &quot;count&quot;: 26,
      &quot;next&quot;: &quot;http://127.0.0.1:8000/myapi/allpost/?page=2&quot;,
      &quot;previous&quot;: null,
      &quot;results&quot;: [
          {
              &quot;id&quot;: 68,
              &quot;body&quot;: &quot;abc&quot;,
          },
          {
              &quot;id&quot;: 67,
              &quot;body&quot;: &quot;de fg&quot;,
          }
      ]
  }
  </code></pre>
  <p>When I call the API 2nd time:</p>
  <pre><code>{
      &quot;count&quot;: 26,
      &quot;next&quot;: &quot;http://127.0.0.1:8000/myapi/allpost/?page=3&quot;,
      &quot;previous&quot;: &quot;http://127.0.0.1:8000/myapi/allpost/&quot;,
      &quot;results&quot;: [
          {
              &quot;id&quot;: 66,
              &quot;body&quot;: &quot;xyz&quot;,
          },
          {
              &quot;id&quot;: 65,
              &quot;body&quot;: &quot;hi j&quot;,
          }
      ]
  }
  </code></pre>