So I'm brand new to the React framework, and I'm running into an issue that I am having trouble debugging.
I am trying to import a class from another component in another file in my project into my app.js. This class does nothing right now but display the text "My Projects" on the page.
When I instantiate it in the app.js using <Projects/> my app goes from displaying the text in the app.js (My App) to a blank white screen.
I'm expecting it to render the text "My App" then "My Projects" on the next line. What am I missing?
Here is the app.js:
import React, { Component } from 'react';
import Projects from './Components/Projects';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
My App
<Projects/>
</div>
);
}
}
export default App;
And here is the Projects.js:
import React, { Component } from 'react';
class Projects extends Component {
render() {
return (
<div className="Projects">
My Projects
</div>
);
}
}
export default Projects;
Here is the error coming from the dev console:
invariant.js:44 Uncaught Error: Invalid tag: data:application/octet-stream;base64,aW1wb3J0IFJlYWN0LCB7IENvbXBvbmVudCB9IG…MKICAgICAgPC9kaXY+IAogICAgKTsKICB9Cn0KZXhwb3J0IGRlZmF1bHQgUHJvamVjdHM7Cg==
at invariant (invariant.js:44)
at validateDangerousTag (ReactDOMComponent.js:345)
at new ReactDOMComponent (ReactDOMComponent.js:372)
at Object.createInternalComponent (ReactHostComponent.js:41)
at instantiateReactComponent (instantiateReactComponent.js:79)
at instantiateChild (ReactChildReconciler.js:44)
at ReactChildReconciler.js:71
at traverseAllChildrenImpl (traverseAllChildren.js:77)
at traverseAllChildrenImpl (traverseAllChildren.js:93)
at traverseAllChildren (traverseAllChildren.js:172)
And here's an image of the product structure: