A challenge that I send before does not work

[aguilcasariki]

This frontend challenge was already completed and sent (that is, it was 100% correct because otherwise it cannot be sent) and now it tells me that I have errors, I do not understand what could have happened, if someone has an answer I would greatly appreciate it

import React,{useState,useEffect} from "https://cdn.skypack.dev/react@17.0.1"
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1"
const Card=()=>{
    const [quote,setQuote]=useState('')
    const [author,setAuthor]=useState('')
    const[data,setData]=useState([])
    const[random,setRandom]=useState(Math.floor(Math.random()*(100)))

    useEffect(()=>{


        const fetchQuotes= async ()=>{
                const url='https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json'
                let res=await fetch(url)
                let data= await res.json()
                setData(data)
                setRandom(Math.floor(Math.random()*(100)))
                setQuote(data.quotes[random].quote)
                setAuthor(data.quotes[random].author)
                
        }
        fetchQuotes()
    },[])

 const handleClick=()=>{
  console.log("click")
  setRandom(Math.floor(Math.random()*(100)))
   setQuote(data.quotes[random].quote)
   setAuthor(data.quotes[random].author)
}



    

    return(
            <div id="quote-box">
              <p id="text">{quote}</p>
              <p id="author">-{author}</p>
              <button id="new-quote" onClick={handleClick}>New quote</button>
              <a href="twitter.com/intent/tweet" id="tweet-quote">Tweet</a>
            </div>
            )


}

ReactDOM.render(<Card />, document.getElementById("root"))

[kevinSmith]

I’m not sure I understand what you mean that “it was 100% correct because otherwise it cannot be sent”. That is not my understanding of how it works. You are expected to confirm that it passes the tests.

Do you this app somewhere where we can see the complete code? An online IDE? A repo?

[aguilcasariki]

I mean that it passes the complete test and is sent, then I check it again and it does not workhttps://codepen.io/aguilcasariki/pen/KKQKBOg

[aguilcasariki]

I don’t understand, I thought that this would solve it, how do I solve it

import React,{useState,useEffect} from "https://cdn.skypack.dev/react@17.0.1"
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1"

[aguilcasariki]

Well I keep trying and it keeps showing me errors

[aguilcasariki]

Hello, thanks to everyone who tried to help me, I already solved the problem and it seems that the url is blocked, I don’t know if it’s the IP of my country or if it’s private, the case is that I already solved it, thank you very much to those who dedicated its time to me

[kevinSmith]

Just looking at your code, I see a couple of bugs.

First of all:

    setRandom(Math.floor(Math.random()*(100)))
    setQuote(data.quotes[random].quote)
    setAuthor(data.quotes[random].author)

That won’t do what you think it does. The setter returned by setState is asynchronous and won’t update until the next render (if I remember correctly). So, that random that is being used is not the one you just set but is the previous one. To show this, run:

  const handleClick=()=>{
    setRandom(Math.floor(Math.random()*(100)))
    setQuote(data.quotes[random].quote)
    setAuthor(data.quotes[random].author)
    console.log('***')
    console.log(quote)
    console.log(data.quotes[random].quote)
  }

It will work the first time because the quote saved in state matches the quote, but on subsequent calls, they get out of sync. You should either store that number in a local variable or use useEffect to update the quote and author.

Next, you keep doing:

    setRandom(Math.floor(Math.random()*(100)))

Do you have 100 quotes? As near as I can tell, you have 102. So, that still “works” but what if the legal team comes back and says that 37 of those quotes have to be removed for legal reasons and some coder removes them but doesn’t change that number - the app will crash. Don’t hard code that in there. You can just use data.quotes.length. And since you do that twice, I’d wrap that in a function.