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.