Hi folks, I am having issues with this “When the #new-quote button is clicked, my quote machine should fetch a new quote and display it in the #text element.” I have tried the handleClick function not to no avail.
It works as expected with vscode by generating quotes when the button is clicked. But it fails in codepen. Help is needed. My code without the html is as follows:
const quotesObject =[
{author: "Kofi Sam", quote: "He is good"},
{author: "Sam Art", quote: "Who among the gods can be compared to You"},
{author: "Yaw Amoah", quote: "You reign in majesty and holiness"},
{author: "John Rice", quote: "You reign forever more"},
{author: "Sarah Toods", quote: "You are the king of glory"},
{author: "Mary Mensah", quote: "You are the prince of peace"},
{author: "James Ho", quote: "I worship You"},
{author: "king France", quote: "I adore You"},
{author: "Yaw Kofi", quote: "I praise your holy name"}
]
class App extends React.Component{
constructor(){
super()
this.state = {
author: '',
quote: ''
}
this.handleClick = this.handleClick.bind(this)
}
componentDidMount(){
let indx = Math.floor(Math.random() * quotesObject.length)
this.setState({
author: quotesObject[indx]['author'],
quote: quotesObject[indx]['quote']
})
}
handleClick(){
let indx = Math.floor(Math.random() * quotesObject.length)
this.setState({
return{
author: quotesObject[indx]['author'],
quote: quotesObject[indx]['quote']
}
})
}
render(){
return(
<div id="quote-box">
<div>
<i className="fa fa-quote-left"></i><span id="text">{this.state.quote}</span>
<h2>-<span id="author">{this.state.author}</span></h2>
</div>
<button class="button" id="new-quote" onClick={this.handleClick}>New quote</button>
</div>
)
}
}