Random Quote Machine - Won't pass user story #10

HTML-CSS
1

My project is done and published!
http://tired-veil.surge.sh/

But it wont pass the following:

User Story #10: I can tweet the current quote by clicking on the #tweet-quote a element. This a element should include the “twitter.com/intent/tweet” path in it’s href attribute to tweet the current quote.

I am using webpack, react, redux, babel, axios, some other packages

Here is the relevant component:

Your code so far

class QuoteBox extends Component {
  componentDidMount() {
    this.props.getQuote();
  }

  onQuoteClick() {
    this.props.getQuote();
  }

  // onTwitterClick() {
  //   window.open(`https://twitter.com/intent/tweet?text="${this.props.quote}" - ${this.props.author}`);
  // }
  render() {
    const twitterLink = `https://twitter.com/intent/tweet?text="${this.props.quote}" - ${this.props.author}`;
    return (
      <div className='border border-primary rounded' id='quote-box'>
        <h6 id='text'><i class="fas fa-quote-left fa-lg"></i>{this.props.quote}<i class="fas fa-quote-right fa-lg"></i></h6>
        <p className='text-muted' id='author'> - {this.props.author}</p>
        **<a href={twitterLink}><button className='btn btn-outline-danger' id='tweet-quote'><i class="fab fa-twitter-square fa-2x"></i></button></a>**
        <button onClick={this.onQuoteClick.bind(this)} className='btn btn-outline-secondary' id='new-quote'>New Quote</button>
      </div>
    );
  };
}

function mapStateToProps({ quote, author }) {
 return { quote, author };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ getQuote }, dispatch);
}

export default connect (mapStateToProps, mapDispatchToProps)(QuoteBox);

It does what it is supposed to. I even changed it - I was using a function before. Is it alright if I submit this anyway?
The challenge says to make all tests pass.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine

2

Hi,
I ran the test suite on your quote generator and noticed that it also failed this test.

User Story #5: Within #quote-box, I can see a clickable element with a corresponding id=“tweet-quote”

I did not see that id on your <a> in dev tools.
I think that if you fixed #5 that #10 might pass as well.

1 Like
3

It was actually on the button element. I moved it to the a element and it passes! Thank you for your help! I really appreciate it