I am currently working on my quote machine and wanted to use React for the first time in a project. However, my element fails to render and I get a error #185.
I am not sure why the element is failing to render. The picking of a new quote is done by generating a random index from the quotes array. I generates a new index until the index generated is not the one currently being used (this.state.index).
Here is the JS code:
$(document).ready(function() {
const quotes = [
["Do not conform any longer to the pattern of this world, but be transformed by the renewing of your mind. Then you will be able to test and approve what God’s will is—his good, pleasing and perfect will.", "Romans 12:2"],
["In the world you will have tribulation. But take heart; I have overcome the world", "John 16:33"]
]
class QuoteElement extends React.Component {
constructor(props) {
super(props)
this.state = {
index: 0
}
this.getNewIndex = this.getNewIndex.bind(this)
}
getNewIndex() {
let i = this.state.index
while (i != this.state.index) {
i = Math.floor(Math.random()*quotes.length)
}
this.setState({
index: i
})
}
render() {
return (
<div id="quote-box">
<p id="text">{quotes[this.state.index][0]}</p>
<p id="author">- {quotes[this.state.index][1]}</p>
<div className="controls-wrapper">
<button id="new-quote" onClick={this.getNewIndex()}>New Quote</button>
<a href="www.twitter.com/intent/tweet" target="_blank" id="tweet-quote"><i className="fab fa-twitter"></i> Tweet Quote</a>
</div>
</div>
)
}
}
ReactDOM.render(<QuoteElement/>, document.getElementById('root'))
});
The HTML code shouldn’t be a issue when rendering?
You don’t need html head in the html section, thus the error.
What is error 185?
If you did not include this in the script for others to check you might get less help: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Are you going to use JQuery with React? I’d say if you don’t need to, don’t do it man, as it might complicates the problem later on. React works with virtual DOM to manipulate DOM. JQuery manipulates DOM directly. I mean it might works, but it might make the learning process more painful.
I think what would help for the randomization and avoiding duplicates would be to shuffle the array and add more quotes.
You can use the fisher yates shuffle to shuffle the array
Adding more quotes to the array will help it be a random quote each time.
It won’t be perfect but it should help
It looks like you are using bible verses.
I am sure you can find a few apis to use that have hundreds of verses.
For the fetch call, you are missing an extra .then
I would suggest reading through the react docs and look at the example they gave on how to make fetch calls.
In your getNewAPIQuote function, I would make the fetch call and then update the state there for the quote and author
getNewAPIQuote() {
//make fetch call and update state here
}
Make sure to use componentDidMount
componentDidMount() {
this.getNewAPIQuote();
}
The docs will show all of that too.
Then you can add the quote and author to the p tags here
For the quotes, maybe you can play around with res.text and JSON.parse
As for the twitter button, I found this old github issue and tried the suggestion of right clicking the link and choosing open in new tab.
That seems to work for me.
In the head of my document, I use the DOCTYPE html, is this needed? It isn’t need on codepen, but if I were to download this will it be required for a html file?
You don’t need the doctype, html, and head sections because that is already built into codepen.
When you export the project in codepen, it will create a dist folder.
You should see that in the index.html for that folder all of the doctype and html tags were added.
I found a netlify blog on how to deploy your site from codepen.
As for your other issue, I am not sure why it affects the font awesome icons.
but if you don’t need that piece of code you can just leave it out.
