react.js the above error occurred in the <div> component (there is no error above)

Question

So, I am trying to get a React App up and going. I copied in some HTML from a template into a component. I am running into an error and its not really clear how to handle it. Here is the error. Note there is no error above:

'index.js:1446 The above error occurred in the <div> component:
    in div (at App.js:57)
    in div (at App.js:28)
    in div (at App.js:15)
    in div (at App.js:14)
    in App (at src/index.js:7)

Here is the code that I am placing in App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import Test from './components/Test.js'
import './App.css';


class App extends Component {
render() {
return (

<React.Fragment>
  <Test />

<div className="probootstrap-hero">
  <div className="container">
    <div className="row">
      <div className="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 text-center probootstrap-hero-text pb0 probootstrap-animate" data-animate-effect="fadeIn">
        <h1>Launch your awesome startup now!</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto provident qui tempore natus quos quibusdam soluta at.</p>
        <p>
          <a href="#" className="btn btn-primary btn-lg" role="button">Get This App</a>
          <a href="#" className="btn btn-primary btn-ghost btn-lg" role="button">Try it for free</a>
        </p>
        <p><a href="#"><i className="icon-play2"></i> Watch the video</a></p> 
       </div>
      </div>
     </div>
    </div>
   
   </React.Fragment>
)}

Answer 1

This happens when you use style as a string instead of an object - among less common other reasons like using an object as style and throwing an error in its toString method.

But here is the most reason that such an error is thrown

// the following is JSX and not html
<div style="color:red" />