title: How to make an API request In React on button click
body: <p>I'm trying to build a random quote generator that loads A quote on componentDidMount with an axios api request , then loads new quotes on button click.</p>
  
  <p>This is for A freecodecamp project. I have tried making the call again on button click, then adding the new response to state, but it will not work at all.</p>
  
  <pre><code>    import React, { Component } from 'react'
      import Button from './Button';
      import axios from 'axios'
      class QuoteBox extends Component{
      constructor(props){
          super(props)
  
          this.state = {
            quotes: []
  
          }
  
       }
      componentDidMount(){
       axios.get('http://quotesondesign.com/wp-json/posts? 
      filter[orderby]=rand&amp;filter[posts_per_page]=1')
       .then(res=&gt; this.setState({quotes: res.data[0]}))
  
      }
      getNext = (ev) =&gt;{
        ev.preventDefault()
        axios.get('http://quotesondesign.com/wp-json/posts? 
      filter[orderby]=rand&amp;filter[posts_per_page]=2')
        .then(res=&gt; this.setState({quotes:[...this.state,res.data[0]]}))
      }
  
  
      render(){
      const {content,title} = this.state.quotes
      const filteredContent = String(content).replace(/(&lt;\w&gt;)|(&lt;\/\w&gt;)| 
      (&amp;#\d{4})/gm, "").replace(/(;)/g,"'")
       console.log(content)
  
       return(
         &lt;React.Fragment&gt;
            &lt;h2&gt;A little inspiration for the day&lt;/h2&gt;
            &lt;div className='outerQuoteBox'&gt;
              &lt;div className='innerQuoteBox'&gt;
                  &lt;p&gt;{filteredContent}&lt;/p&gt;&lt;br/&gt;&lt;br/&gt;{title}
              &lt;/div&gt;
              &lt;Button getNext={this.getNext} /&gt;
          &lt;/div&gt;
          &lt;/React.Fragment&gt;)
         }
        }
      export default QuoteBox
  </code></pre>
  
  <p>And this is my button component</p>
  
  <pre><code>   import React, { Component } from 'react'
  
     export class Button extends Component {
      render() {
       return (
        &lt;React.Fragment&gt;
         &lt;button onClick={this.props.getNext} className='nextBtn' 
           type='button'&gt;Next&lt;/button&gt;
         &lt;/React.Fragment&gt;
        )
      }
     }
  
     export default Button
  </code></pre>
  
  <p>When I click the button, it seems like the request isn't going through at all. If i check State in the dev tools, only the first quote from componentDidMount is in the array. I don't understand where my mistake is.</p>
  
  <p>Edit: I had used the wrong prop reference, so it wasn't making the call. I fixed this and it does make the call now, and it brings in one new quote, but that's it. And it doesn't add the new one to state, it just replaces it with the one new one. and that's all it will do. The <code>api</code> instructions say the end point i'm using should return a new random quote, but it does not.</p>