Change Author onClick

Passing 11 out of 12,
I don’t understand why the author would fail, while the quote is passing… they are nearly identical in functionality.

live demo, be sure to use the NavBar to get to quote
repo

use the hamburger menu on the top left and select Random Quote Machine to run the test suite, they say it’s designed for Chrome and may encounter bugs in other browsers.

It appears to be working as far as the element with id=author is changing, but that’s not passing the automated test suite, so I’m not sure what I’m missing.

Quote.js

import React, { Component, Fragment } from 'react';
import { Card, Button, ButtonGroup } from 'react-bootstrap';
import PropTypes from 'prop-types';

export class Quote extends Component {

  constructor(props) {
    super(props);

    // Initial State
    this.state = {
      author: "Douglas Adams",
      source: "So Long, and Thanks for All the Fish",
      quote: "And as he drove on, the rainclouds dragged down the sky after him, for, though he did not know it, Rob McKenna was a Rain God. All he knew was that his working days were miserable and he had a succession of lousy holidays. All the clouds knew was that they loved him and wanted to be near him, to cherish him, and to water him.",
    };
  }

  // Quote.propTypes = {
  // this.propTypes = {
  static propTypes = {
    quote: PropTypes.string.isRequired,
    source: PropTypes.string.isRequired,
    author: PropTypes.string.isRequired
  };

  setQuote = () => {
    this.setState({
      author: "Obiwan Kenobi",
      source: "Return of the Jedi",
      quote: "Many of the turths we cling to..",
    });

    console.log("Qque");

    return;
  };

  render() {
    return (

      <Fragment>
        <Card bg="dark" style={{ width: '90%' }} id="quote-box">
          <Card.Header>

            <h4>
              <a
                className="App-link"
                href="https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine"
                target="_blank"
                rel="noopener noreferrer"
                title=" Random Quote Machine"
              >
                <i className="fas fa-quote-left"></i> Random Quote Machine <i className="fas fa-quote-right"></i>
              </a>
            </h4>

            {/* Random Quote */}

          </Card.Header>
          <Card.Body>
            <blockquote className="blockquote mb-0">
              <p id="text">
                {' '}
                {this.state.quote}
                {' '}
              </p>
              <footer className="blockquote-footer">
                <h3 id="author">
                  {this.state.author}
                </h3>
                <cite title="Source Title">{this.state.source}</cite>
              </footer>
            </blockquote>
            <ButtonGroup aria-label="Basic example" style={{ width: '20%' }}>
              <Button variant="primary" id="new-quote" onClick={this.setQuote}>new quote</Button>

              <Button as="a" variant="primary" id="tweet-quote" href="twitter.com/intent/tweet" ><i className="fab fa-twitter"></i></Button>
            </ButtonGroup>
          </Card.Body>
        </Card>

        <h5>
          <a
            className="App-link"
            href="https://www.twitch.tv/videos/836894977"
            target="_blank"
            rel="noopener noreferrer"
            title="This Episode on Twitch I build a template for my freeCodeCamp projects, with FontAwesome & Analytics"
          >
            <i className="fab fa-twitch"></i> These Episodes on Twitch <i className="fab fa-twitch"></i>
          </a>
        </h5>
      </Fragment>
    );
  }
}

export default Quote;

https://forum.freecodecamp.org/t/quote-machine-why-is-author-treated-diferently-than-the-quote/437226

I got feedback on the freecodecamp forum, apparently, it’s making 2 separate calls for the testing and I’m only changing it the first time through. That should point me in the right direction at least.

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