Hey can anyone tell what is wrong with my state in react?

Someone help pls

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

Trying to implement above functionality.

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 created 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>

There seems to be wrong something with my state i can’t figure it out.
I am trying to rerender QuoteBox Component

Put the button inside QuoteBox, when user clicks on the button, invoke the this.fetchRandomQuote();

Like:
<button onClick={() => this.fetchRandomQuote() }> Get new quote </button>

1 Like

He’s already done that and got it working, that’s not what he’s asking. I suggested that one approach is to just have a component that renders quotes, and to get new quotes, just cause that to rerender (I think I’m understanding you here @DVGY?). I managed to confuse OP with this (just do what @John99Dev says, ignore what I said ). For reference, here’s a functional version of what I meant:

The reasoning for this is that literally the only thing that rerenders is the contents of the blockquote containing the quote/author (or loading/error).

2 Likes

Hey Mr. Dan Couper, you are right. I am very new to react that is why i am having hard time to understand basic lol :smile: :smile: .

I don’t understand what code you wrote,bcz i have not learned those things.
Thanks

1 Like

I realise, I’m really sorry for confusing you!

1 Like