Build random quote mchn

Project Feedback
#1

hello, i’m having a problem with the Build a Random Quote Machine project specifically the User Story #11 when the tweet button is clicked it should lead to twitter with the quote in a tweet editor for some reason mine isn’t working here’s the code

var tweetURl =
          "https://twitter.com/intent/tweet?text=" ;

i tried to change it to do this:

var tweetURl =
          `https://twitter.com/intent/tweet? text=${quote.quote} - ${quote.author}`;

however everytime i try this the page doesn’t show up
here’s a link to the codepen : https://codepen.io/samobim/pen/KKVxPgZ?editors=0110

#2

A URL can not have spaces and {quote.author} should be ${quote.author}

If you want to add spaces in the text parameter you can use encodeURI most likely.

#3

where are the spaces you’re talking about i do not understand ?

#4

oh yeah i did that before but it still didn’t work that wasn’t the problem i just typed it wrong in here

#5

Example
https://twitter.com/intent/tweet?text=iliketurtles

I see in your edit there’s still spaces in your url string

Example with spaces:

encodeURI('https://twitter.com/intent/tweet?text=i like turtles - brentor')

"https://twitter.com/intent/tweet?text=i%20like%20turtles%20-%20brentor"
1 Like
#6

i get what you’re saying but still don’t know how to fix it in my case

#7

Your codepen doesnt seem like its updated with a new url. Can you show me the url you are trying to use now that is not working?

#8

it’s because i didnt save try it now https://codepen.io/samobim/pen/KKVxPgZ?editors=0110

#9

Yeah idk why I can’t acceess the objects properties for some reason. I’m tinkering with it give me a few mins.

1 Like
#10

thanks man i appreciate the effort

#11

Yeah this has to do with how you are updating your state. You’re causing more renders than are necessary.

Still messing around but if you put a console.log(quote) in your render method after you declare quote you will see it’s being rendered three times

There’s some issues like calling this.randomIndex function inside your setState which calls setState itself, but your not calling this.randomIdex() your just returning the function definition.

  componentDidMount() {
    fetch(API)
      .then((res) => res.json())
      .then((res) => {
        this.setState({
          quotes: res.quotes
        });
      });
  }

  //   getRandomIndex=()=>{
  //     const {quotes} = this.state;

  //     if(quotes.length> 0){
  //       const index = Math.floor(Math.random() * quotes.length);
  //       this.setState({
  //         index
  //       })
  //     }
  //   }

  render() {
    const { quotes, index } = this.state;
    const quote = quotes[index];
    
    if (quote) {
      var tweetURl = `https://twitter.com/intent/tweet?text=${quote.quote}-${quote.author}`;
    }

This gets the quote to go through.

If you uncomment the getRandomIndex it should work I just did that for troubleshooting purposes. You had that in the setState of the componentDidMount which seems unnecessary and was causing and extra render too.

Let me know if this makes sense or if you have any other questions.

Seems the URL encoding is happening somewhere without us manually having to do it to.

1 Like
#12

Pretty much just view all of the above as my thoughts while troubleshooting.

Real answer:

The first render of quote is undefined so just like you are checking for it in your return statement, you have to do the same thing above.

So you can do something like this:

if (quote) {
      var tweetURl = `https://twitter.com/intent/tweet?text=${quote.quote} -${quote.author}`;
    }
1 Like
#13

https://codepen.io/gobalkrishnan-v/pen/KKVoLEK

#14

man i can’t thank you enough you explained it very well for me now i understand . god bless you