I'm building an app that has 3 select fields. When the user hits submit on the form it will return a list of teachers that meet the value requirements. For example in the form you can select (3rd grade teachers, who are tenure, and are in location New York) and it will return a list of teachers that meet those requirements.
I'm stuck on the filtering part. I'm using lodash and the filter part currently works. However I want the filter function to be fired when the form is submitted. And then if the user decides to make a change to the form and resubmit for the filter function to filter again using the original TeacherList.
I believe my issue is on line this.setState = ({ TeacherList : TeacherList});
I need to make this array accessible in handleSubmit()
doing something like const filteredList = _.filter(TeacherList, (v) => v.TeaherTenure === this.state.tenure);
Any ideas on how I can do this? Some more background I'm building this on SharePoint
and grabbing the list using pnp.sp.web.lists
. I added a comment on the Submit Handle on where I want the logic to be. When I move the TeacherList up there I get a TeacherList only refers to type, but is being used a a value here
error
import * as React from 'react';
import styles from './TeacherSelector.module.scss';
import { ITeacherSelectorProps } from './ITeacherSelectorProps';
import pnp from "sp-pnp-js";
import * as _ from "lodash";
import {
Environment,
EnvironmentType
} from '@microsoft/sp-core-library';
interface TeacherList {
name: string,
address: string,
phone: string,
fax: string,
TeaherTenure: string,
TeacherGrade: string,
}
export default class TeacherSelector extends React.Component<ITeacherSelectorProps, {tenure: string, grade: string, location: string, TeacherList: string[]}> {
constructor(props) {
super(props);
this.state = {
tenure: 'yes',
grade: 'first',
location: 'new-york',
TeacherList: [],
};
this.handleChangeTenure = this.handleChangeTenure.bind(this);
this.handleChangeGrade = this.handleChangeGrade.bind(this);
this.handleChangeLocation = this.handleChangeLocation.bind(this);
this.handleSubmit= this.handleSubmit.bind(this);
}
handleChangeTenure(event) {
const { value } = event.target;
this.setState({ tenure: value });
}
handleChangeGrade(event) {
const { value } = event.target;
this.setState({ grade: value });
}
handleChangeLocation(event) {
const { value } = event.target;
this.setState({ location: value });
}
handleSubmit(event) {
event.preventDefault();
alert('Tenure: ' + this.state.tenure + 'Grade: ' + this.state.grade + 'Location: ' + this.state.location);
//Do Filter here instead of form submit.
}
public render(): React.ReactElement<ITeacherSelectorProps> {
return (
<div className={ styles.TeacherSelector }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<form onSubmit={this.handleSubmit}>
<label>
Tenure (YES/NO):
<select name="tenure" value={this.state.tenure} onChange={(Val: any) => this.handleChangeTenure(Val)}>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</label>
<label>
Teaching Grade Level
<select name="grade" value={this.state.grade} onChange={this.handleChangeGrade}>
<option value="first">first</option>
<option value="second">second</option>
<option value="third">third</option>
<option value="fourth">fourth</option>
</select>
</label>
<label>
Location
<select name="location" value={this.state.location} onChange={this.handleChangeLocation}>
<option value="new-york">New York</option>
<option value="queens">Queens</option>
<option value="new-jersey">New Jersey</option>
</select>
</label>
<input
type="submit"
value="submit"
className="button"
onSubmit={this.handleSubmit}
/>
</form>
</div>
</div>
</div>
</div>
);
}
private _renderListAsync(): void {
// Local Enviroment
if (Environment.type === EnvironmentType.Local) {
console.log('This is local');
}
else if (Environment.type === EnvironmentType.SharePoint || Environment.type === EnvironmentType.ClassicSharePoint) {
console.log('This is Sharepoint');
pnp.sp.web.lists.getByTitle("Data").items.get().then((items: any[]) => {
const TeacherList = items.map((item) => {
return {
name: item.Full_x0020_Name,
address: item.Address,
phone: item.Phone,
fax: item.Fax,
TeaherTenure: item.Tenure,
TeacherGrade: item.Grade,
}
});
this.setState = ({ TeacherList : TeacherList});
//const filteredList = _.filter(TeacherList, (v) => v.TeaherTenure === this.state.tenure);
//console.log(filteredList);
});
}
}
}