Uncaught TypeError: Cannot read property 'filter' of undefined

Viewed 16099
import React, {PureComponent} from 'react';
import {TextInput} from '../../shared';
import {array} from 'prop-types';
import { EmployeeTable } from '../employeeTable/EmployeeTable';
import './HeaderSearch.scss';

export class HeaderSearch extends PureComponent {
    static propTypes = {
        employees: array
    }

    constructor (props) {
        super(props);

        this.state = {
            searchValue: null
        };
    }

    _updateSearchValue (value) {
        this.setState({
            searchValue: value
        });
    }

    render () {
        const employees = this.props.employees;
        let filteredEmployees = employees.filter(
                (employee) => {
                    return employee.name.indexOf(this.state.searchValue) !== -1;
                }
            );
        return (
            <div className='header_search'>
                <ul>
                    {filteredEmployees.map((employee) => {
                        return <EmployeeTable
                            employees={employee}
                            key={employee.id}
                            />;
                    })}
                </ul>
                <TextInput
                    label='Search for people'
                    value={this.state.searchValue}
                    onChange={(e) => this._updateSearchValue(e.target.value)}
                    />
            </div>
        );
    }
}
export default HeaderSearch;

I'm a newbie at ReactJS so I'm getting stuck on this problem. I realize this question has been asked and I looked through them all but still couldn't find a solution as to why I'm getting this error. I want to filter the array employees according to the searchValue and display the update Employee Table.

2 Answers
Related