Fetch request inside ComponentDidMount and Button click

1


Here is my code.

I have put fetch request inside ComponentDidMount

componentDidMount() {
    fetch("https://api.quotable.io/random")
      .then(response => response.json())
      .then(
        data => {
          this.setState({
            quote: data.content,
            author: data.author,
            isLoaded: true
          });
        },
        error => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      );
  }

On refreshing/reloading the page it fetches random quote

I want to add call above fetch request when NEW QUOTE button is clicked.

Do i need to define the a function fetchQuote() outside and call it inside ComponentDidMount using this.fetchQuote and on Button element as onClick = {this.fetchQuote} ??

What are different methods to achieve this functionality mentioned above ?

Thanks

2

Move the state up, don’t add another fetch, there’s no need, it just makes things complicated, your component doing too much already

Make a component with some state of some kind (as you’re just wanting to randomly get quotes, and you’re literally just trying to trigger a rerender, just a number will do, or a boolean that your u switch to true/false, whatever). Remove the button from QuoteBox (it should only render a quote fetched on componentDidMount, that’s it)

In that parent component render the <QuoteBox/>, and pass it the number as a prop. Alongside it, render a button, and onClick set your state to a new value.

When you click the button, the state will change, this will be passed to QuoteBox as a new prop, causing QuoteBox to rerender

3

Mr DanCouper i added a new Parent Component as QuoteApp and moved the state and ComponentDidMount into it. I passed state properties as prop to it.

Now i don’t under what do you mean by this

Remove the button from QuoteBox (it should only render a quote fetched on componentDidMount, that’s it)

In that parent component render the <QuoteBox/> , and pass it the number as a prop. Alongside it, render a button, and onClick set your state to a new value.

  1. If i remove the button , the whole alignment will be messed up as it will render after QuoteBox Please have a look at line 36 to 48 of App.js file.

  2. What props should i pass to that NewQuote button. ?

Thanks

4

What do you mean? Just move things up out of the component. You’re talking about stylistic things, shouldn’t make any difference.

What I’m describing is a way to get your component to rerender. The fact I’ve split it into two components was because there was too much going on in one. You don’t have to do that: you can just have some state in your QuoteBox: modifying that will also cause the component to rerender. You can then call your fetch in componentDidUpdate.

All you are trying to to is to get that fetch function to run again. What I’ve suggested is one way, there are others, but it relies on the fact that when either the state or the props of a component change, the component function runs again (rerenders)

None, in this scenario it should just change the state of its component

I wish I hadn’t suggested this first, it is simpler, but I thought minutes confusing you. Just add some state to the existing QuoteBox component and use setState to adjust it onClick

5

Okay i am confused, that is why i am not able to understand.

Move the state up,

You mean to lifting the state ??

Alongside it, render a button, and onClick set your state to a new value.
What do you mean by this.

Please have a look at my code and tell me when i click on Button how can i do the same thing which is happening inside ComponentDidMount ??

Thanks

6

This is what I mean:

class Parent extends React.Component {
  state = {
    click: false
  }

  render() {
    return(
      <>
        <QuoteBox newQuote={click} />
        <button onClick={() => this.setState({ click: !this.state.click})}>Get new quote</button>
      </>
    );
  }
}

Every time the button is clicked it flips click between true/false, like flipping a lightswich on and off. Every time the newQuote property on <QuoteBox newQuote={click} /> gets a new value, the QuoteBox component rerenders. Every time the component rerenders, it calls fetch in componentDidMount.

If seperating this out is confusing you a bit, and you want to pile this all into the single component, then within the QuoteBox component leverage the existing click state you have in place. You will need a fetch function in componentDidUpdate, it’ll be exactly the same as the existing one in componentDidMount. So move it out out a seperate method, then call it like this.fetchRandomQuote() or whatever in each of the two lifecycle functions

7

Thank you so much

If seperating this out is confusing you a bit, and you want to pile this all into the single component, then within the QuoteBox component leverage the existing click state you have in place. You will need a fetch function in componentDidUpdate , it’ll be exactly the same as the existing one in componentDidMount . So move it out out a seperate method, then call it like this.fetchRandomQuote() or whatever in each of the two lifecycle functions

THIS WORKED FOR ME

Every time the button is clicked it flips click between true/false, like flipping a lightswich on and off. Every time the newQuote property on <QuoteBox newQuote={click} /> gets a new value, the QuoteBox component rerenders. Every time the component rerenders, it calls fetch in componentDidMount .

This NOT worked for me. Can you tell me what is wrong ?

I created this inside index.js

class Parent extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     click: false
   };
 }

 render() {
   return (
     <>
       <QuoteBox newQuote={this.state.click} />
       <button onClick={() => this.setState({ click: !this.state.click })}>
         Get new quote
       </button>
     </>
   );
 }
}

I changed this inside App.js

<button
                // onClick={() => this.setState({ click: !this.state.click })}
                className="btn btn-primary"
                id="new-quote"
              >
                NEW QUOTE{this.props.newQuote}
              </button>