function GenerateQuote() {
const [quotes] = React.useState([
{author: ‘Nelson Mandela’, text: ‘The greatest glory in living lies not in never falling, but in rising every time we fall’},
{author: ‘Walt Disney’, text: ‘The way to get started is to quit talking and begin doing.’},
{author: ‘Eleanor Roosevelt’, text: ‘If life were predictable it would cease to be life, and be without flavor.’},
{author: ‘Mother Teresa’, text: ‘Spread love everywhere you go. Let no one ever come to you without leaving happier.’},
{author: ‘Franklin D. Roosevelt’, text: ‘When you reach the end of your rope, tie a knot in it and hang on.’},
{author: ‘Eleanor Roosevelt’, text: ‘The future belongs to those who believe in the beauty of their dreams.’},
])
const random = Math.floor(Math.random()*quotes.length)
const [randomNumber,setRandomNum] = React.useState(random)
const generateNewQuote = () => {
setRandomNum(random)
}
return (
Your browser information:
Chrome Version 89.0.4389.114 (Official Build) (64-bit)
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36.
function GenerateQuote() {
const [quotes] = React.useState([
{author: 'Nelson Mandela', text: 'The greatest glory in living lies not in never falling, but in rising every time we fall'},
{author: 'Walt Disney', text: 'The way to get started is to quit talking and begin doing.'},
{author: 'Eleanor Roosevelt', text: 'If life were predictable it would cease to be life, and be without flavor.'},
{author: 'Mother Teresa', text: 'Spread love everywhere you go. Let no one ever come to you without leaving happier.'},
{author: 'Franklin D. Roosevelt', text: 'When you reach the end of your rope, tie a knot in it and hang on.'},
{author: 'Eleanor Roosevelt', text: 'The future belongs to those who believe in the beauty of their dreams.'},
])
const random = Math.floor(Math.random()*quotes.length)
const [randomNumber,setRandomNum] = React.useState(random)
const generateNewQuote = () => {
setRandomNum(random)
}
return (
<div className="container">
<div className="quote-container">
<h1 id="text">{quotes[randomNumber].text}</h1>
<p id="author">{quotes[randomNumber].author}</p>
<button id="new-quote" onClick={generateNewQuote}>New Quote</button>
</div>
<div>
<a id="tweet-quote" href="#">twitter</a>
</div>
</div>
)
}
class MainComponent extends React.Component {
render() {
return (
<div>
<GenerateQuote />
</div>
)
}
}
const quoteElement = document.getElementById("quote-box")
ReactDOM.render(<MainComponent />,quoteElement)Preformatted text