I keep getting an error that prevents the app to start. I've been staring at this and can't seem to find the problem. I'm sure it's a really stupid mistake and I'm going to look at the answer and laugh.
I get this error:
While processing files with jsx (for target web.browser):
client/components/App/App.jsx:30:4: client/components/App/App.jsx:
Unexpected token (30:4)
Here is my App.jsx file:
App = React.createClass({
mixins: [ReactMeteorData],
getMeteorData() {
return {
loggedIn: !!Meteor.user()
}
},
showLayout() {
return (
<div className="row">
<div className="col-md-3">
{this.props.nav}
</div>
<div className="col-md-9">
{this.props.content}
</div>
</div>
)
},
showLogin() {
return (
<div className="row">
<div className="col-md-12 text-center">
<p>You must be logged in to do that.</p>
</div>
)
},
render() {
return (
<div className="container wrapper">
<div className="row">
{ this.allowedLayout() ? this.showLayout() : this.showLogin() }
</div>
</div>
)
}
});
You forgot to close the div here:
<div className="row">
<div className="col-md-12 text-center">
<p>You must be logged in to do that.</p>
</div>
should be:
<div className="row">
<div className="col-md-12 text-center">
<p>You must be logged in to do that.</p>
</div>
</div>
Related
I am working on a requirement where the user needs to select at least one value to get the result.
Here is my component.ts file
initializeForm():void{
this.myForm= this.frmBuilder.group({
field1: [null],
field2: [null],
field3: [null] )
}, this.AtLeastOneInputHasValue1);
}
AtLeastOneInputHasValue1=(validator: ValidatorFn) => (
group: FormGroup,
): ValidationErrors | null => {
const hasAtLeastOne =
group &&
group.controls &&
Object.keys(group.controls).some(k => !validator(group.controls[k]));
return hasAtLeastOne ? null : { atLeastOne: true };
};
get frm(): any {
return this.myForm.controls;
}
component.html
<form *ngIf="myForm" [formGroup]="myForm">
<div class="row">
<div class="col-md-2">
<label>Field1</label>
<p-autoComplete [(ngModel)]="Field1Model" field="Field1" formControlName="Field1"
(onSelect)="doSomething()" [multiple]="true">
</p-autoComplete>
<div *ngIf="frm.Field1.invalid && (frm.Field1.dirty || frm.Field1.touched)" class="text-danger">
<div *ngIf="frm.Field1.errors.required">Field1 is required</div>
</div>
</div>
<div class="col-md-2">
<label>Field2</label>
<p-multiSelect [options]="Field2Options" [(ngModel)]="Field2Model" formControlName="courseName"
defaultLabel="Select a Field" optionLabel="Field2Name">
</p-multiSelect>
<div *ngIf="frm.Field2.invalid && (frm.Field2.dirty || frm.Field2.touched)" class="text-danger">
<div *ngIf="frm.Field2.errors.required">Field2 is required</div>
</div>
</div>
<div class="col-md-2">
<label>Field3 </label>
<p-multiSelect [options]="Field3List" [(ngModel)]="Field3Model" formControlName="Field3"
defaultLabel="Select a status" optionLabel="statusName">
</p-multiSelect>
<div *ngIf="frm.Field3.invalid && (frm.Field3.dirty || frm.Field3.touched)" class="text-danger">
<div *ngIf="frm.Field3.errors.required">Field3 is required</div>
</div>
</div>
<div class="col-md-2">
<div class="row" style="padding-top: 27px;">
<button pButton type="button" label="Search" [disabled]='!myForm.valid'
class="d-inline-block mb-2 pb-1" (click)="SearchFilter()"></button>
</div>
</div>
</div>
It is not working. If I use Validators.required in any of the fields then it shows a message under that control, but I want to use that at least one field should be selected to get the result.
I followed reference Angular2 FormBuilder Validators: require at least one field in a group to be filled but its not working.
What I missed. Thank you in advance.
I am beginner in reactjs, I want to copy a color when I click on color.
How should it be done?
import React from 'react';
const Green = ()=>{
return (
<div>
<h1 className='g-color-title'>Green Color</h1>
<div className='container-fluid'>
<div className='div-style' id='color31'> #2ECC72 </div>
<div className='div-style' id='color32'> #26AE60 </div>
<div className='div-style' id='color33'> #6AB04A </div>
<div className='div-style' id='color34'> #43BE31 </div>
<div className='div-style' id='color35'> #10A881 </div>
<div className='div-style' id='color36'> #019031 </div>
<div className='div-style' id='color37'> #75DA8B </div>
<div className='div-style' id='color38'> #218F76 </div>
<div className='div-style' id='color39'> #218F76 </div>
<div className='div-style' id='color40'> #7CEC9F </div>
</div>
</div>
)
}
export default Green;
You can use navigator.clipboard.writeText() to copy text to the clipboard.
I would recommend using an object of colors, then with Object.entries() and map() create the <div>s and add an onClick() to trigger it:
const Green = () => {
const colors = {
color31: '#2ECC72',
color32: '#26AE60',
color33: '#6AB04A',
color34: '#43BE31',
color35: '#10A881',
color36: '#019031',
color37: '#75DA8B',
color38: '#218F76',
color39: '#218F76',
color40: '#7CEC9F',
};
return (
<div>
<h1 className='g-color-title'>Green Color</h1>
<div className='container-fluid'>
{Object.entries(colors).map(([id, color]) =>
<div className='div-style' id={id} onClick={navigator.clipboard.writeText(color)}>{color}</div>
)}
</div>
</div>
);
}
export default Green;
I am trying to successfully express Semantic-UI code with the same functions I have used in Semantic-UI-react code. Any help would be appreciated.
This is what I have:
class Preview extends React.Component {
componentDidMount() {
const update = () => {
this.dest.textContent = this.src.innerHTML.replace(/</g,
'\n<');
};
setInterval(update, 300);
update();
}
render() {
return (
<div>
<div ref={(src) => Object.assign(this, { src })}>
<Demo />
</div>
<pre ref={(dest) => Object.assign(this, { dest })}>
</pre>
</div>
)
}
}
export class Demo extends Component { constructor(){
super();
this.localStorageClear.bind(this); }
localStorageClear = (e) => {
e.preventDefault();
window.localStorage.clear();
};
render() {
return (
<div id = "soundcloud-player">
<Container className='col'>
<div className='col-left js-playlist toggle'>
<div className='inner'>
</div>
</div>
<div className='col-right'>
<div className = 'main'>
<Input size='massive' icon='search' input = {{ className:
'input-search js-search' }} placeholder='Search for a song
or artist...'/>
<Icon className='js-submit'/>
<Button onClick={(e) => this.localStorageClear(e)}
className='clear' content='Clear Playlist'/>
<Button content='Show/Hide Playlist' id='toggle'
className='hide-toggle'/>
<Card className='js-search-results search-results'/>
</div>
</div>
</Container>
</div>
The code written in the Preview Component is specifically written to convert the code written inside of the Demo Component. The Demo Component should convert to what is shown below:
<div class="ui container col">
<div class="col-left js-playlist toggle">
<div class="inner">
</div>
</div>
<div class="col-right">
<div class="main">
<div class="ui massive icon input">
<input placeholder="Search for a song or artist..." class="js-search input-search">
<i class="search icon js-submit"></i>
</div>
<button onclick="localStorageClear();" class="clear">Clear Playlist</button>
<button class="hide-toggle" href="#" id="toggle">Show/Hide Playlist</button>
<div class="search-results js-search-results ui cards">
</div>
</div>
</div>
The actual output of the code at the top is:
<div id="soundcloud-player">
<div class="ui container col">
<div class="col-left js-playlist toggle">
<div class="inner">
</div>
</div>
<div class="col-right">
<div class="main">
<div class="ui massive icon input input-search">
<input placeholder="Search for a song or artist..." type="text">
<i aria-hidden="true" class="search icon">
</i>
</div>
<i aria-hidden="true" class="icon js-submit">
</i>
<button class="ui button clear" role="button">Clear Playlist
</button>
<button id="toggle" class="ui button hide-toggle" role="button">Show/Hide Playlist
</button>
<div class="ui card js-search-results search-results">
</div>
</div>
</div>
</div>
</div>
I'm trying to figure out why the localStorageClear function does not show up for the first button in the actual output. Is there wrong I am doing at the top inside of the Semantic-UI-React code inside of the Demo Component?
The way you are setting up your handler function is not correct. You are also binding in your constructor AND inline with an arrow function inside of the onClick event for the button. You only need to bind in one place.
Take a look at the codesandbox example I made so you can see how to declare a class method handler function and use it with a click event. Notice that there is no constructor here or arrow function to bind on the onClick event? That is because the binding is happening on the class method. handleClick = () => {}
class App extends React.Component {
handleClick = e => {
console.log(e.target + " was clicked.");
// Do whatever functionality you need here.
// In your example you do not show that it matters what the element is,
// so you don't need to pass the event (e) into your class method.
};
render() {
return (
<Container>
<Divider hidden />
<Button content="Click Me" onClick={this.handleClick} />
<Divider hidden clearing />
<Message info>
Look in your console and you will see that the click function is
working.
</Message>
</Container>
);
}
}
Here is a working codesandbox example.
Pls. I want to implement geolocation in meteor with react. I do not completely understand how to do that. Meanwhile I have tried the code below, but without any result:
render() {
if (Geolocation.latLng() == null) {
return(
<span>Determining locataion...</span>
)
} else {
return Geolocation.latLng();
}
return(
<div className="panel panel-default">
<div className="panel-content">
<div className="panel-heading">
Update Message
</div>
<form className="form center-block">
<input type="hidden" ref="imageid" />
<div className="panel-body">
<textarea id="sharing" placeholder="Share what?" ref="sharing" className=" form-control input-lg">
</textarea>
<h3>I am here!</h3>
<div>
<span type="text"> {this.latLng.lat} </span>
</div>
</div> ....
I was not receiving any error message. Thus, I do not know how else to use geolocation inside react. Pls. I'm counting on your quickest help.
I have abround 6000 documents in my mongo collection, which I need to load up into meteor client upon app startup.
In my routes (located under app/client), I have this:
Router.map(function() {
this.route('home', {
path: '/',
template: 'dashboardWrapper',
waitOn: function() {
return Meteor.subscribe('nasdaq');
},
cache: true
});
});
My dashboardWrapper template looks like this:
<template name="dashboardWrapper">
{{#if Template.subscriptionsReady}}
{{> dashboard}}
{{/if}}
</template>
My dashboard template looks like this:
<template name="dashboard">
<div class="container">
<h2>Priority - 1 Incidents Over Time</h2>
<div class="row">
<div id="yearly-bubble-chart" class="dc-chart">
<strong>Yearly Performance</strong> (radius: fluctuation/index ratio, color: gain/loss)
</div>
</div>
<div class="row">
<div id="gain-loss-chart">
<strong>Days by Gain/Loss</strong>
<a class="reset" href="javascript:gainOrLossChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="quarter-chart">
<strong>Quarters</strong>
<a class="reset" href="javascript:quarterChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="day-of-week-chart">
<strong>Day of Week</strong>
<a class="reset" href="javascript:dayOfWeekChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="fluctuation-chart">
<strong>Days by Fluctuation(%)</strong>
<span class="reset" style="display: none;">range: <span class="filter"></span></span>
<a class="reset" href="javascript:fluctuationChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div id="monthly-move-chart">
<strong>Monthly Index Abs Move & Volume/500,000 Chart</strong>
<span class="reset" style="display: none;">range: <span class="filter"></span></span>
<a class="reset" href="javascript:moveChart.filterAll();volumeChart.filterAll();dc.redrawAll();"
style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div id="monthly-volume-chart">
</div>
<p class="muted pull-right" style="margin-right: 15px;">select a time range to zoom in</p>
</div>
<div class="row">
<div>
<div class="dc-data-count">
<span class="filter-count"></span> selected out of <span class="total-count"></span> records | Reset All
</div>
</div>
<table class="table table-hover dc-data-table">
</table>
</div>
<div class="clearfix"></div>
</div>
</template>
The relevant part of Meteor.client looks like this:
if (Meteor.isClient) {
var ndx,data;
Template.dashboardWrapper.onCreated( function() {
var template = this;
template.subscribe("nasdaq");
});
Template.dashboard.onCreated( function() {
data = Nasdaq.find().fetch();
ndx = crossfilter(data);
});
Template.dashboard.onRendered(function(){
var self = this;
self.subscribe("nasdaq", function() {
self.autorun(function() {
data = Nasdaq.find().fetch();
});
});
What I expect from this, is for the dashboard template to wait until all the data from the Nasdaq collection loads up.
What happens is absolutely nothing - no data and no errors.
If I remove ironRounter all together, and refresh, I can get a couple of dozen records (out of 6000 total).
Is there a way reliably force the app to wait until every single document loads up?
Try subscribe right before load the current template, may be it will work.
Router.route('/dashboardWrapper/:_id', {
name: 'dashboardWrapper',
waitOn: function () {
return [
Meteor.subscribe('nasdaq')
];
},
data: function () {
return Nasdaq.findOne(this.params._id);
}
});