CODEWITHSUNDEEP
javascriptreactjs
Bilal Kazmi
Bilal Kazmi

Reputation: 179

Component didn't re-renders on state change?

I am creating a random quote generator. There is a quote box that displays quote and author names. I created a method to invoke on a button click that may randomize the quote list and display a new quote and a next button to get next quote from my quote list. I can see the first quote but the component didn't re-renders on clicking buttons or something gets wrong that I can't get next quote or can't randomize. Here is the code:

class UI_qoutebox extends React.Component {
constructor(props) {
    super(props);
    this.state = { qoutes: props.qoutes, authors: props.authors, num: 0 };
    this.UI_rq = this.UI_rq.bind(this);
    this.UI_next = this.UI_next.bind(this);
}
UI_rq() {
    let rnd = Math.floor(Math.random() * this.state.qoutes.length);
    this.setState({ num: rnd });
}
UI_next() {
    let p = this.state.num + 1;
    if (p > this.state.qoutes.length) { p = 0 }
    this.setState({ num: p })
}
render() {
    const { qoutes, authors, num } = this.state;
    return (
        <div className="qoute-box">
            <span className="qoute">{qoutes[num]}</span>
            <span>{authors[num]}</span>
            <input type="button" value="Randomize" onClick={() => this.UI_rq} />
            <input type="button" value="Next" onClick={() => this.UI_next} />
        </div>
    )
}

}

I am working on Freecodecamp's project and I need quick help. Thanks in advance.

Upvotes: 0

Views: 59

Answers (1)

Shubham
Shubham

Reputation: 1288

Change this

<input type="button" value="Randomize" onClick={this.UI_rq}/>
<input type="button" value="Next" onClick={this.UI_next}/>

Upvotes: 2

Related Questions