1

I am using Griddle Component and trying to customize Filter component to fit the requirement. I am getting Uncaught TypeError: this.props.onChange is not a function error. I am following this example. https://griddlegriddle.github.io/Griddle/docs/customization/ Here's components.

List component:

class UserList extends React.Component {
render(){
const users = this.props.users;
return( 
<Griddle data={users} plugins={[plugins.LocalPlugin]} styleConfig={styleConfig} components={{Filter}} pageProperties={{pageSize: 5}}>
  <RowDefinition>
    <ColumnDefinition id="username" title="Username" className="" />
    <ColumnDefinition id="firstname" title="First Name" className="" />
    <ColumnDefinition id="lastname" title="Last Name" />
    <ColumnDefinition id="id" title="Action" customComponent={EditDeleteUser} />
  </RowDefinition>
</Griddle>
)
}
}export default UserList;

Custom Fiter Component:

import React from 'react';
import { browserHistory, Router, Route, Link, withRouter } from 'react-router';
class Filter extends React.Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
}  
onChange(e) {
 this.props.onChange(e.target.value);
}
render() {
 return (
            <div className="searchInput">
                <input 
                  type="text" 
                  className="form-control"
                  placeholder="search" 
                  onChange={this.onChange}
                />
                <label htmlFor="search" className="icon icon-1202" rel="tooltip" title="search"></label>
              </div> 
 )
}
Hussain Ansari
  • 98
  • 8

1 Answers1

0

I was looking through what "this" was ... so I figured out that

    this.props.setFilter(e.target.value)

worked for me.

mazli84
  • 1