Uncaught TypeError: Cannot read property 'filter' of undefined

Question

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.

Solution 1

Just add default value for HeaderSearch

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 defaultProps = { // <-- DEFAULT PROPS
        employees: []       // undefined gets converted to array,render won't trigger error
    }

    static propTypes = {
        employees: array
    }

    constructor (props) {
        super(props);

        this.state = {
            searchValue: null
        };
    }

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

    render () {
        // omitted
    }
}
export default HeaderSearch;

Error triggers when employees prop is not provided, or null or undefined, when you provide default value of empty Array, the Array.filter won't throw error, because default value of employees is an instance of Array

Solution 2

As the error message tells you, problem is that your constant employees is undefined. The problem will be in a place where you are rendering HeaderSearch component. Most likely you are not passing it the props you think you are. Try to render<HeaderSearch employees={[]} />. Does it work? What does console.log(this.props) show you? Can you see key employees there?

If you need more assistance please post the code where you are actually rendering HeaderSearch component.

Comments

[Patrick Evans]

Well like all other questions with this error, it means you are trying to use something on a variable that is undefined. Meaning a variable doesn't hold what you think it does. Make sure employees is actually an array (eg console.log it)

[msd]

This is the entire code for the HeaderSearch. I used console.log for employees and it shows that it's undefined. Where should i define the array in this code?

[Marek Takac]

You shouldn't define the array in HeaderSearch code. Your code is expecting employees to be given as a property when you use the component. Something like <HeaderSearch employees={<any-array-of-employees>} />. This will make empoyees available in this.props.employees`.

[Marek Takac]

Also as @Medet Tleukabiluly mentions in his answer you can use defaultProps to set default value.