Line 50: Parsing error: Unterminated JSX contents - reactjs

Parsing Error: Unterminated JSX contents. Not sure why it keeps on saying that I need another tag. Also, the one thing that I have trouble with is what to do with the self-closing HTML tags. I don't know what to do with them for JSX.
I have tried to match all of the tags and used Atom to create an Html file and a bracket matcher. I have no idea why it keeps giving me this error. I thought to add a starting tag for the self-closing tags.
import React from 'react';
import linkedinIcon from "./footer-component/linkedin-icon.png";
export default class Resume extends React.Component {
render(){
return (
<div className="container">
<div className="col-md-12">
<h1>Résumé</h1>
<h3>SUMMARY</h3>
<p>Passionate front-end web developer with 3 years of experience using JavaScript, HTML5, CSS, Bootstrap and Javascript frameworks to build the users experience and user interface for client-facing webpages. Specializes in React, HTML, Bootstrap,
and CSS</p>
<hr>
</hr>
<h3>Technical Skills</h3>
<ul>
<li>Front-end</li>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap 4</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Embedded JavaScript</li>
<li>REACT</li>
</ul>
<li>Other</li>
<ul>
<li>Git</li>
<li>GitHub</li>
</ul>
</ul>
<h3>Work Experience</h3>
<p>Operations Summer Intern, Benetech | Palo Alto, California | 2019 - 2019</p>
<ul>
<li>Created more than 20 landing pages in HTML5, CSS3, and Bootstrap 4</li>
<li>Implemented CSS/Bootstrap to design multiple responsive web pages</li>
<li>Maintained front-end code and documentation standards</li>
</ul>
<hr>
</hr>
<h3>Education</h3>
<div className="row">
<div className="col-md-2">
Expected in 06/2020
</div>
<div className="col-md-10">
<p><b>High School Diploma</b>
<br></br>
<b>Fusion Academy</b> - Palo Alto</p>
</div>
</div>
);
} // END OF RENDER
} // END OF Resume
Parsing error: Unterminated JSX contents. Hope errors are gone.

You didn't close two top div elements (.container and .col-md-12)

You are missing two </div> tags at the end for .container and .col-md-12.
Also, you should probably use <hr /> only, without the closing tag. HTML says:
Start tag: required, End tag: forbidden
<hr></hr> is valid XHTML, but you should use the above for compatibility reasons.

Related

My jsx file doesn´t recognize the <strong> attribute?

Im working in React JS and it seems that the jsx file doesnt recognize the att. Is that possible? Here is my code:
<div className="LoginFormContainer">
<h1>
Welcome to <strong> {APP_TITLE} </strong>
</h1>
</div>

Materialize-css Modal in React with React Router

Trying to have a modal come in from Materialize-css that i get from that npm but nothing is showing up. I am using React with React Router v4 as well
I currently have it set up in my nav bar and the search-bar changes with the #modal1 identifier but the modal doesn't pop up. I would really like to avoid hacky things like have a line or two of jQuery in componentDidMount just for this because if thats the only solution I'll just go back to bootstrap.
I'm trying it with the code straight from the Docs. Please help!
<div className='container'>
<div id="modalHere" className="modal">
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div className="modal-footer">
Agree
</div>
</div>
<nav>
<div className="nav-wrapper blue-grey lighten-2">
<Link to='/professionals' className="brand-logo right"><img src={pegasusIcon} alt='OurTelos logo' className="OurTelosNavbarLogo"/></Link>
<ul id="nav-mobile" className="left">
<li><Link to="/professionals/sessions">Sessions</Link></li>
<li><a className="waves-effect waves-light btn modal-trigger" href="#modalHere">Modal</a></li>
</ul>
</div>
</nav>
</div>
EDIT
I added the jquery in my index file for the modal in a script tag and my modal does pop up but not properly. Take a look. Also if I use the example with the Fixed-Footer things seem to come out and work just fine.....why
EDIT 2
Now I am having an issue that the same modals from a single exported react component will no longer show after the page has been changed by react router...

Ng-repeat and Native scrolling creating issue with scope loading

I am creating hybrid application and i am facing issue in ng-repeat with native scrolling.
Below are my template file code
<ion-view align-title="center">
<ion-content class="ionic headerWithNav" overflow-scroll='true'>
<ul>
<li ng-repeat="lessondata in AllLessonComing" ng-class="{true: 'showBg', false: ''}[(AllLessonComing).length>0]" ng-click="lessondetailsPage('{{lessondata.id}}')">
<div class="lesson-wrap">
<div class="lesson-img">
<div class="lession-price"> <span>{{lessondata.price}}</span> </div>
<div class="lessonImg-wrap"><img image-lazy-src="{{lessondata.image}}" lazy-scroll-resize="true" image-lazy-loader="bubbles" class="ink" on-finish-render="ngRepeatFinished"/></div>
</div>
<div class="lessonInfo">
<div class="row">
<div class="col col-67">
<h1>{{lessondata.title}}</h1>
<div class="lesson-status">{{lessondata.category_name}}</div>
<div class="row">
<div class="col lesson-location">{{lessondata.City}}</div>
<div class="col">
<div class="lesson-rating"><img src="img/start-rating.jpg"></div>
</div>
</div>
</div>
<div class="col padr-none">
<div class="trainnerImg-wrap">
<div class="trainee-img"> <img src="{{lessondata.coach_image}}"> </div>
<div class="trainee-name">{{lessondata.coach_name}}</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li ng-show="(AllLessonComing).length == 0">
<div class="inner-container"><div class="no-results">No Lesson Found</div></div>
</li>
</ul>
</ion-content>
</ion-view>
As you can see i am using "overflow-scroll='true'" for native scrolling and ng-repeat for the showing my lessons.
This is an image when scope data render first time--
when scope data render first time
And this is an image when i scroll speedily when i scroll speedily
ISSUE:- I don't know why these images and text are reloading or flickering when i scroll speedily
My Code is correct.
ng-repeat was creating issue with the ionic 1.0. Now ionic released new version that is ionic 1.2 and you will see that this issue has been resolved by ionic's developers.
you can update your ionic version easily.
If you are using NPM then use this command
ionic lib update
Check brower.JSON file in www/lib/ionic/ folder. if brower.JSON exists then remove this file.
you will see the mazik of ionic 1.2.
This issue happens on hybrid app. The longer list (and images) the more lag it has. As I can see you are using Ionic, try to use ion-list instead. It could help create a better list view.
p/s: sorry I was not able to made a comment (not enought rep point). So I post it here. Hope it help!
Two more suggestion:
Use angular bindonce to reduce $watchers and faster render
If you are building your app using ionic build for Android, you could use built-in Crosswalk for a stronger webview of your app

Dynamically populate a page

I am new to mobile applications, and since i have a strong html, js, css background i decided to try cordova using angularjs. Anyway, i have hit a road block and i don't know the best way to handle this.
I have this block that is setup to repeat; x.large and x.thumb are pulled from a json file via Angular.
<div class="gallery" ng-controller="imagelistController">
<div class="thumbnail" ng-repeat="x in urls">
<img src="{{x.thumb}}">
</div>
</div>
I want to setup a single page using a query string href links to a page such as image.html?id=1. In image.html i want it do display image 1. If you change the id to 2, it would show image 2.
<div ng-controller="imagelistController">
<img src="{{x.large}}">
</div>
<ul class="social-share">
<li><button onclick="window.plugins.socialsharing.share(null, null, '{{x.large.url}}', null)">image only</button></li>
</ul>
<script type="text/javascript" src="js/SocialSharing.js"></script>

ReactBootstrap global is undefined

so I'm currently working on a project written in Flask which I added Bootstrap to. I have recently started adding some react components and I would like to have them look like the other bootstrapped components. Here is some of my code:
This is where I've included my bootstrap.js files and react.js file
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/build/react.js"></script>
<script src="/static/js/build/JSXTransformer.js"></script>
<script src="/static/js/react-bootstrap-bower/react-bootstrap.js"></script>
This html normally is rendered by bootstrap as wonderful little pager icons, but not in react:
return (
<div>
<nav>
<ul className="pagination pagination-lg">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
I understand I didn't put the full return, the return isn't the issue at hand, however, its the styling. I tried adding in a Pager element with the following
var Pager = ReactBootstrap.Pager;
...
//inside some html return
<Pager></Pager>
but I get the response first that ReactBootstrap is not defined. Yet I read that the ReactBootstrap global is created automatically when you include the js file. The other response is that Pager doesn't exist (obviously since ReactBootstrap was unable to return it).
So my question is, can I simply return html without the data-reactid info or somehow have it rendered by bootstrap without needing reactBootstrap? or do is there something I'm missing from my files to use reactBootstrap. Thanks in advance for the help!
I tried to reproduce it in a jsbin, but ReactBootstrap.Pager is a component, and it renders with the correct styles.
You're not loading things correctly.

Resources