calling child component from parent component in electron-es6-react

Question

I am using electron with react es-6,i need to dispaly the data in fixed data table for that i wrote the code like this way here is main class code from here i am calling the the fixedTable

 export default class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            result: [],
        };
    }
    getZipData() {
        //here iam getting data and set the data to state
    }
    componentDidMount() {
        var data = this.getZipData();
    };
    render() {
        alert("render");
        if(this.state.result.length==0) {
            return (
                <div className="row-fluid">
                    <img className="col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3"
                         src="http://www.preciseleads.com/images/loading_animation.gif"/>
                </div>
            )
        }else{
            alert(this.state.result.length);
            <fixedTable result={this.state.result}/>
            }
    }
}

child class:here i am using fixed data table in the constructor(props) of this class i need to set the result as to result data which i am getting in parent class

    class fixedTable extends React.Component{
    constructor(props){
        super(props);
        this.state ={
            result:props.result //i need to use parent data result here
            filteredRows: null,
            filterBy: null,
        }
    }
    componentWillMount(){
        alert("willmount");
        this._filterRowsBy(this.state.filterBy);
    }
    _rowGetter(rowIndex){
        return this.state.filterRows[rowIndex];
    }
    _filterRowsBy(filterBy){
        var result = this.state.result.slice();
        var filteredRows = filterBy ? rows.filter(function(row){
            return result.ClinicId.toLowerCase().indexOf(filterBy.toLowerCase()) >= 0
        }): result;
        this.setState({
            filteredRows,
            filterBy,
        });
    }
    _onFilterChange(e){
        this._filterRowsBy(e.target.value);
    }
    render(){
        return(
            <div>
                <label>filter by <input onChange={this._onFilterChange} /></label>
                <Table
                    height={200}
                    rowHeight={30}
                    rowGetter={this._rowGetter}
                    rowsCount={this.state.filteredRows.length}
                    width={450}
                    maxHeight={450}
                    headerHeight={40}>
                    <Column
                        label="RecNo"
                        width={270}
                        dataKey="Recno"
                        />
                    <column
                        label="Clinic Name"
                        width = {300}
                        dataKey="ClinicName"
                        />
                    <column
                        label="Connection String"
                        width = {100}
                        dataKey="ConnectionString"
                        />
                    <column
                        label="ClinicId"
                        width = {100}
                        dataKey="ClinicId"
                        />
                </Table>
            </div>
        )
    }
}

any help much appreciated

In your Main.js render function you should `return ;` (you are missing `return` in the else clause). Then you access the properties with `this.props` in the child component. — collardeau, Sep 04 '15 at 11:08
Thank you for your response,I tried like that also but i didn't get any response to the child — Hussian Shaik, Sep 04 '15 at 12:00

score 0 · Answer 1 · answered Sep 04 '15 at 14:31

You need to bind this to getZipData in the constructor.

    export default class Main extends React.Component {
            constructor(props) {
                    super(props);
                    this.state = {
                            result: [],
                    };
                    this.getZipData = this.getZipData.bind(this);
            }
            getZipData() {
                    //here iam getting data and set the data to state
            }
            componentDidMount() {
                    var data = this.getZipData();
            };
            render() {
                    alert("render");
                    if(this.state.result.length==0) {
                            return (
                                    <div className="row-fluid">
                                            <img className="col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3"
                                                     src="http://www.preciseleads.com/images/loading_animation.gif"/>
                                    </div>
                            )
                    }else{
                            alert(this.state.result.length);
                            <fixedTable result={this.state.result}/>
                            }
            }
    }

calling child component from parent component in electron-es6-react

1 Answers1