Stuck with Random Quote Machine

[danmikes]

Tell us what’s happening:
Describe your issue in detail here.
I am doing the Random Quote Machine project and fetching random quotes from an api. I can either get a new quote and color with refresh button, or with the button, but not both. I can’t figure out what I am doing wrong.

Your code so far

import { useState, useEffect } from 'react'
import './App.css'

function App() {

  const back = '#ddd'
  const text = '#333'
  const colors = ['#edbefe', '#ffdfdf', '#bed0ef', '#e8c6ff', '#b5ffc8', '#eef093']

  let [quotes, setQuotes] = useState([{}])

  useEffect(() => {
  fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json')
    .then(response => response.json())
    .then(data => setQuotes(data.quotes))
  }, [])
  
  function randomColor() {
    return colors[Math.floor(Math.random() * colors.length)]
  }

  function randomQuote() {
    return quotes[Math.floor(Math.random() * quotes.length)]
  }

  let [color, setColor] = useState(randomColor())
  let [quote, setQuote] = useState(randomQuote())

  function change() {
    setQuote(randomQuote())
    setColor(randomColor())
  }

  return (
    <div className="App w3-container w3-cursive" style={{ background: color, color: text }}>
      <div id="header" style={{ background: back, color: text }}>
        <div id="quote-text">
          "{quote.quote}"
        </div>

        <div id="quote-author">
          {quote.author}
        </div>
      </div>

      <div id="footer">
        <button id="share-tweet" style={{ background: back }}>
          share tweet
        </button>

        <button id="new-quote" onClick={change} style={{ background: back }}>
          new quote
        </button>
      </div>

    </div>
  );
}

export default App;

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

Challenge: Build a Random Quote Machine

Link to the challenge:

freeCodeCamp.org

[skaparate]

Hello! Welcome to the community !

I was unable to understand this:

I can either get a new quote and color with refresh button, or with the button, but not both

You mean that you cannot get a new quote and color when you hit the refresh button on the browser? Could you explain it a little more .

The only problem I found is that you’re missing the React in the import line (which is required when using JSX):

import React, { useState, useEffect } from 'react'

[danmikes]

With my present code the new quote is only generated when pressing the button . But when I refresh the browser window, no quote is given. When I changed the code for the refresh browser action to generate and view a new quote it would not do so when the button was pressed.

[skaparate]

Ah! I see. You’re not setting the new quote/color the first time you fetch them. You could call change() right after setQuotes.

[danmikes]

Super, thank you very much!