Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6211

TypeScript React accessing array in handlesubmit()

$
0
0

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);        
            }); 

        }
    }      


}

Viewing all articles
Browse latest Browse all 6211

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>