Anime Quote Generator: React Code Not Showing Return Items/Not Pulling Quotes

[Tonisenpai]

Question: I don’t understand why the code is not working. At this point, not only is the formatting not showing up at all in the previewer, it’s also not pulling the random quotes using the onClick handler. For reference, the list of quotes is an array of objects that look like this: [{quote: “random phrase goes here”, author: “Jane Doe - (anime name)”}]. There are about 75 of these objects in the array of data I have the code pulling from, to see the full list, use the repl link if that helps find the issue. All the functional code is included in the snippet below though.


Repl link: https://replit.com/@Tonisenpai/WillingContentQuadrantsRandom-Quote-Machine#src/App.jsx

import React, { useState } from "react";
import './App.css'

export const App = ({quotes}) => { 
  
  const [phrase, setPhrase] = useState(0);

  const handleClick = () => {
    const random = quotes[Math.floor(Math.random()*quotes.length)];
    setPhrase(random);
  }

  return (
    <main id="main">
      <div id="container">
        <h1 id="head">Anime Quote Generator</h1>
          <div id="quote-box">
            <div id="text">{quotes[random].quote}</div>
            <div id="author">{quotes[random].author}</div>
            <div>
              <a id="tweet-quote" href="twitter.com/intent/tweet"><img src="src/Assets/twitter_logo.png" id="twitter" /></a>
              <span id="space"></span>
              <button id="new-quote" onClick={handleClick}>NEW QUOTE</button>
            </div>
          </div>
      </div>
    </main>
  )
}

[WindLother]

You’re trying to reference the random variable outside of its scope.
Instead of referencing random , you should reference phrase.

import React, { useState } from "react";
import './App.css'

export const App = ({quotes}) => { 
  
  const [phrase, setPhrase] = useState(quotes[0]); // Like here

  const handleClick = () => {
    const random = quotes[Math.floor(Math.random()*quotes.length)];
    setPhrase(random);
  }

  return (
    <main id="main">
      <div id="container">
        <h1 id="head">Anime Quote Generator</h1>
          <div id="quote-box">
            <div id="text">{phrase.quote}</div> 
            <div id="author">{phrase.author}</div>
            <div>
              <a id="tweet-quote" href="twitter.com/intent/tweet"><img src="src/Assets/twitter_logo.png" id="twitter" /></a>
              <span id="space"></span>
              <button id="new-quote" onClick={handleClick}>NEW QUOTE</button>
            </div>
          </div>
      </div>
    </main>
  )
}

[Tonisenpai]

Thank you for your help! The previewer is still not showing me the look of it, but your solution makes sense. Thanks for explaining it to me!