Hello,
I have a form that has a Select field in it the elements are coming from my db here’s the code for that:
``
const propTypes = {
cityValue: React.PropTypes.object,
cities: React.PropTypes.array.isRequired,
locations: React.PropTypes.array.isRequired,
}
class ArtistCreateComponent extends Component {
constructor(props) {
super(props);
this.state = {
cityValue: '',
changes: {}
};
this.showSuccessMessage = this.showSuccessMessage.bind(this);
this.cityOptions = this.cityOptions.bind(this);
this.locationOptions = this.locationOptions.bind(this);
}
cityOptions() {
console.dir(this.props.cities);
return this.props.cities.map((city) => {
return {'label':city.displayName, 'value':city._id};
});
}
locationOptions() {
const cityId = this.state.changes.cityId || '';
const locationsFiltered = cityId ? _.where(this.props.locations, {cityId:cityId}) : this.props.locations;
return locationsFiltered.map((location)=> {
return {'label':location.name,'value':location._id};
});
}
showSuccessMessage() {
this.setState({successMessage: 'Artist created.'})
document.getElementById('formtop').scrollIntoView({behavior:'smooth'})
setTimeout(() => {
this.setState({successMessage: null})
FlowRouter.go('admin-page');
}, 3000);
}
render() {
const style = {
height: 100,
width: 400,
margin: 20,
textAlign: 'center',
display: 'inline-block',
backgroundColor: '#e85323',
};
return (<DashboardComponent>
<div id='formtop'>
<h1>Create Artist</h1>
{!this.state.successMessage ? '' :
<MuiThemeProvider>
<Paper style={style} zDepth={3}>{this.state.successMessage}</Paper>
</MuiThemeProvider>
}
<MuiThemeProvider>
<Form
collection={ArtistsCollection}
type='insert'
ref='form'
onSuccess={this.showSuccessMessage}
state={this.state.changes}
onChange={changes => {this.setState({changes:changes});}}
>
<Field fieldName='artistName'/>
<Field id='citySelectID' fieldName='cityId' options={this.cityOptions()}/>
<Field id='optionSelectID' fieldName='locationIds' options={this.locationOptions()}/>
<Field fieldName='image'/>
<Field fieldName='photoCredit'/>
<Field fieldName='description'/>
<Field fieldName='color'/>
<Field fieldName='soundcloud'/>
<Field fieldName='isFeatured'/>
</Form>
</MuiThemeProvider>
<MuiThemeProvider>
<RaisedButton label='Back' onTouchTap={() => FlowRouter.go('admin-artist')}/>
</MuiThemeProvider>
<MuiThemeProvider>
<RaisedButton primary={true} label='Create' onTouchTap={() => this.refs.form.submit()}/>
</MuiThemeProvider>
</div>
</DashboardComponent>);
}
}
ArtistCreateComponent.propTypes = propTypes;
export default createContainer(() => {
const handler = Meteor.subscribe('cities-and-locations')
const isLoading = !handler.ready()
const cities = CitiesCollection.find({},{fields: {displayName:1}}).fetch()
const locations = LocationsCollection.find({}, {fields: {name:1, cityId:1}}).fetch()
return {isLoading, cities, locations}
}, ArtistCreateComponent)
You’ll see the method cityOptions
has a console output that outputs several times during loading the thing is the number of items it retrieves changes, the first two times it gets 10 items, it then will get the total number of elements (which is 24). However the Select element never updates from the original query and only will show the 10 elements. I’m not even sure why it is grabbing ten elements in the first place instead of something like 0. Anyone know what I’m doing wrong here?
Thanks.