0

I keep getting this syntax error, but have no idea where the end sequence is failing:

 import React, { Component } from 'react'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <textarea rows="4" cols="50"> <h1>Look at this!</h1> <h2>This is MAGIC!</h2> <a href="https://www.mozilla.com/"> <p>Think about all this power of <code>React</code></p> <textarea /> </div> ); } } export default App;
Improve this question
1
  • What syntax error? Please add it to the question. Commented Oct 4, 2018 at 23:24

3 Answers 3

Reset to default
2

The <a> element is not closed. I suggest you to add linters it will be easier for you to spot these errors, also it's strange why you editor didn't point that.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you for answering. How is not closed?
0

You have two unterminated JSX contents in your code. One for the first textarea and one for the a. Here is the fixed code. By the way, I agree with the linter suggestion.

 class App extends React.Component { render() { return ( <div className="App"> <textarea rows="4" cols="50" /> <h1>Look at this!</h1> <h2>This is MAGIC!</h2> <a href="https://www.mozilla.com/">Go to Mozilla</a> <p> Think about all this power of <code>React</code> </p> <textarea /> </div> ); } } ReactDOM.render( <App />, document.getElementById( "root" ) ); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>

Improve this answer

Comments

0

html <a> tag needs to be closed using </a> if there is any content like text, div, etc.

 <a href="https://www.mozilla.com/">Go to Mozilla</a>
Improve this answer

Comments