Passing filtered value to react render()

Question

I use react-datagrid to represent my documents table, but I cannot figure out how to instantiate render() scope with full data. It always instantiate with no data.

this is my datagrid

'use strict';

 var React    = require('react')
 var DataGrid = require('react-datagrid')


 var columns = [
     { name: 'id', title: '#', width: 50 },
     { name: 'business_id', flex: 1 },
     { name: 'lastName'  },
     { name: 'city', flex: 1 },
     { name: 'country', flex: 1 },
     { name: 'email', width: 200 }
  ]

  var App = React.createClass({

    initData: function(documents){
        if(documents){
            return documents;
        } else {
            console.log('documents: '+ this.props.documents);
            return this.props.documents;
        }
    },
    getInitialState: function(){
        return {
            dataSource: [],
        }
    },
    componentDidMount() {
        this.setState({
            dataSource: this.initData()
        })
    },
    render: function(){
      console.log('this.props.documents: '+ this.props.documents)
      return <DataGrid
        idProperty='id'
        dataSource={this.initData()}
        columns={columns}
        style={{height: 400}}

        onFilter={this.handleFilter}
        liveFilter={true} //to apply the filter while typing
     />
    },

   handleFilter: function(column, value, allFilterValues){
    //reset data to original data-array
    var data = this.initData()

    //go over all filters and apply them
    Object.keys(allFilterValues).forEach(function(name){
        var columnFilter = (allFilterValues[name] + '').toUpperCase()

        if (columnFilter == ''){
            return
        }

        data = data.filter(function(item){
            if ((item[name] + '').toUpperCase().indexOf(columnFilter) === 0){
                return true
            }
        })

      })
      this.initData(data)
      this.setState({})
    }
   })

the first console log returns nothind

documents:

the console log in the render() returns data

this.props.documents:[object Object],[object Object],[object Object],[object Object],[object Object]

and this how I call my datagrid component from my home component

<DocumentReactNewGrid documents={this.state.documents}/>

Pranesh Ravi · Accepted Answer · 2016-10-23T15:39:08.423

1

Make the dataSource as a state. On filter, set the new data to the state. This will re-render the component with the new data.

'use strict';

 var React    = require('react')
 var DataGrid = require('react-datagrid')


var columns = [
   { name: 'id', title: '#', width: 50 },
   { name: 'business_id', flex: 1 },
   { name: 'lastName'  },
   { name: 'city', flex: 1 },
   { name: 'country', flex: 1 },
   { name: 'email', width: 200 }
]

var App = React.createClass({
  initData: function(documents){
    if(documents){
        return documents;
    } else {
        return this.props.documents;
    }
   },
  getInitialState: function(){
    return { 
      dataSource: this.initData(),
    }
  },
  componentWillReceiveProps(nextProps) {
    this.setState({
     dataSource: nextProps.documents,
    })
  },
  render: function(){
    return <DataGrid
        idProperty='id'
        dataSource={this.state.dataSource}
        columns={columns}
        style={{height: 400}}

        onFilter={this.handleFilter}
        liveFilter={true} //to apply the filter while typing
    />
   },


   handleFilter: function(column, value, allFilterValues){
    //reset data to original data-array
    var data = this.initData()

    //go over all filters and apply them
    Object.keys(allFilterValues).forEach(function(name){
        var columnFilter = (allFilterValues[name] + '').toUpperCase()

        if (columnFilter == ''){
            return
        }

        data = data.filter(function(item){
            if ((item[name] + '').toUpperCase().indexOf(columnFilter) === 0){
                return true
            }
        })

      })
      this.setState({
        dataSource: data
      })
    }
   })

Hope this helps!

edited Oct 23 '16 at 15:39

answered Oct 23 '16 at 14:15

Pranesh Ravi

18,642
9
46
70

tkx Pranesh, it works only when I filter data and call the handleFilter, but at first the datagrid is initialized empty, I don't understand why. – kyserslick Oct 23 '16 at 14:33
@kyserslick Updated the code. You need to move the `initData()` above `getInitialState()`. Hope this works! – Pranesh Ravi Oct 23 '16 at 14:38
it's not fixing it, the initData() still returns nothing when dataGrid is first loaded – kyserslick Oct 23 '16 at 14:53
Updated the answer! Check now... try to put a console.log(this.props.documents) in render and check if you're getting the props. If not you need to check that! – Pranesh Ravi Oct 23 '16 at 15:00
I updated my question with your code, still instantiate empty – kyserslick Oct 23 '16 at 15:20
Updated the answer. You need to use componentWillReceiveProps as the first log returns empty. Props are passed later which will be captured now. – Pranesh Ravi Oct 23 '16 at 15:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126458/discussion-between-kyserslick-and-pranesh-ravi). – kyserslick Oct 23 '16 at 15:32
Tkx a lot @Pranesh adding props to componentWillReceiveProps(props) solved the problem – kyserslick Oct 23 '16 at 15:55

Passing filtered value to react render()

1 Answers1