React random quote machine

JavaScript
1

I am currently working on creating a random quote machine.
Im having trouble understanding why my second button isnt working when trying to generate the author of the quote generated.
Im very new to coding so all the help would be greatly appreciated.

here is my code ATM:


class QuoteMachine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quotes: [
        {quote: 'I have a dream', author: 'Martin Luther King JR'},
        {quote: 'I cannot tell a lie', author: 'George Washington'}
      ],
      currentQuote: '',
      currentAuthor: ''
    };
  }
  generateQuote = () => {
    const randomIndex = Math.floor(Math.random() * this.state.quotes.length);
    const {quote, author} = this.state.quotes[randomIndex];
    this.setState({
      currentQuote: quote,
      currentAuthor: author
    });
  };
  generateAuthor = () => {
    if (this.state.currentQuote) {
      this.setState({ currentAuthor: quotes[this.state.currentQuote + 1] });
    }
  };
  render() {
    return(
    <div>
      <h1>Random Quote Generator</h1>
      
      <button onClick={this.generateQuote}>Generate Quote</button>
      <p>{this.state.currentQuote}</p>
        <button onClick={this.generateAuthor}>Generate Author</button>
        <p></p>
    </div>
      );
  }
}

const el = document.querySelector('#root');
ReactDOM.render(<QuoteMachine/>, el);
2

EDIT:
i have the code

{this.state.currentAuthor}

within my empty p element.
and it is generating the author, but i want it to generate only when i click the sencond button and currently it generates when the quote button is clicked.
How do i make it so the author button only generates the author when i click it

3

Hi @titoQ

Welcome to FCC.

Is this supposed to be like this? You are concatenating this.state.currentQuote and 1 and using the result as an array index and quotes seems undefined going by the code you have provided.

Why would you want to retrieve the quote and author separately? It looks a lot more sensible to display the quote and its author with a single button click.

4

Its not my preference to do so, but for a course project that requires the two to be generated individually

5

In that case, do not update currentAuthor in generateQuote event handler.

In the generateQuote handler, you can update currentQuote only. And in the generateAuthor handler, look for the quotes object in this.state.quotes and update author accordingly. Something like below. Be sure to handle the case where currentQuote is an empty string appropriately.

const { author } = this.state.quotes.find( quote => quote.quote === this.state.currentQuote);

EDIT
Alternatively, you can also store the index of the currently visible quote in state as well. In the generateQuote event handler, you can generate the random integer and update index of currently visible quote and current quote in state.

Then in the generateAuthor event handler, you can update current author only.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.