Minified React error #185 when rendering React element on page

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?

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <script src="https://kit.fontawesome.com/f6cfa43d23.js" crossorigin="anonymous"></script>
  <title>Random Quote Machine</title>
</head>
  <body>
    <header>
      <h1>Random Quote Machine</h1>
    </header>
   <main id="root"> <!-- Here! -->
    </main>
    <footer>
      <p>Built by Michael Nicol</p>
    </footer>
  </body>
</html>

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 added in the test bundle and removed jQuery, but I still get the same errors.

For the onClick function, you don’t need the parenthesis here

You can just write

onClick={this.getNewIndex}

Now you should be able to see the quote appear on the screen.

As for the random function, I would probably just rewrite it like this

  getNewIndex() {
    let newIndex = Math.floor(Math.random() * quotes.length);

    this.setState({
      index: newIndex
    });
  }

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 :grinning:
It looks like you are using bible verses.
I am sure you can find a few apis to use that have hundreds of verses.

Hope that helps!

1 Like

Thank you so much for your help!

Link for future reference:

I looked into API bible verses API and have had issues. I have not really worked with API’s before (not on that certification).

From my research, I tried using ES6 fetch to return a result from the API with https:

getNewAPIQuote() {
    fetch('https://labs.bible.org/api/?passage=random&type=json').then(r => {
     r = r.json();
     console.log(r)
     this.setState = ({
       
     })
    })
  }

Documentation: NET Bible Web Service (API)

The issue is that I am not sure how to access the data within the promise I am receiving after using .json().

Using r[0] returns undefined. Object.keys(r) is a empty array.

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

     <p id="text">{this.state.quote}</p>
        <p id="author">- {this.state.author}</p>

When you do all of that you should see the quotes appear and the new quote function should be working too.

Hope all of that made sense!

1 Like

Thank you so much for the help.

Some of the quotes come with double quotes already in them (Someone talking), so I decided to add the following code on line 18 to change this:

quote: result[0].text.trim().replaceAll('\"', "'"),

The issue is that It doesn’t work. I don’t know why exactly, as I tried both \" and a single double quote "

quote: result[0].text.trim().replaceAll('"', "'"),

I also tried using the tweet feature with the following code:

// before return
let tweetLink = `https://twitter.com/intent/tweet?text=${this.state.quote}`
// in return
<a href={tweetLink} target="_blank" id="tweet-quote"><i className="fab fa-twitter"></i> Tweet Quote</a>

It produces results such as this:

https://twitter.com/intent/tweet?text=Now%20Naomi%20had%20a%20relative%20on%20her%20husband’s%20side%20of%20the%20family%20named%20Boaz.%20He%20was%20a%20wealthy,%20prominent%20man%20from%20the%20clan%20of%20Elimelech.

Which produces the following error:
image

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.

1 Like

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?

Edit: I also added:

body > * {
  display: block;
  margin: auto;
  color: white;
}

To my pen, and it seems to mess with font awesome but only when it is not on debug mode:

Not sure why it does this. I don’t need this code, but its interesting to see what is does.

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.