Not able to pass the props to child component

[raghubedi2004]

Hi @AllenFang,

I have been using BootstrapTable to render the data from backend in tabular form. My requirement is that on click of a row, I have to pass value of one of the column to another component (Aside.js)

I have tried everything, but not able to pass the values, which is very weird. Please help me in finding what i am missing.

Here is the code :- DataTable.js :

class DataTable extends Component {

constructor(props) {
    super(props);
    this.state = {
        responseData:'',
                    selectedRows:[]
    };

    this.selectRow = {
        mode: "checkbox",
        clickToSelect: true,
        bgColor: "#d6b4ef",
        onSelect: (row, isSelect, rowIndex, e) => {
            this.handleSelectSubscriber(row, isSelect, e);
        }
    }

    this.handleSelectSubscriber = this.handleSelectSubscriber.bind(this);
}

handleSelectSubscriber(row, isSelect, e) {
    alert(isSelect + " " + row.subscriberName);
    if (isSelect) {
        this.state.selectedRows.push(row.subscriberName);
    } else {
        this.state.selectedRows.pop(row.subscriberName);
    }
    alert(this.state.selectedRows);
}

render() {

return (
  <div className="animated">

    <Card style={{width:"100%", height:"100%"}}>
      <CardBody>
                <BootstrapTable headerClasses="header-class" data={this.state.responseData} condensed version="4" striped hover pagination search selectRow={this.selectRow} options={this.options}>
                    <TableHeaderColumn isKey dataField="id" hidden={true}>Id</TableHeaderColumn>
          <TableHeaderColumn id="subscriberName" dataField="subscriberName" width="150px" dataSort>Subscriber Name</TableHeaderColumn>
                    <TableHeaderColumn dataField="phoneNumber" width="130px" dataSort>Phone Number</TableHeaderColumn>
                    <TableHeaderColumn dataField="ratePlan" width="100px" dataSort>Rate Plan</TableHeaderColumn>
                    <TableHeaderColumn dataField="subscriptionStatus" width="90px" dataSort >Status</TableHeaderColumn>
                    <TableHeaderColumn dataField="ban" width="80px" dataSort>Ban</TableHeaderColumn>
                    <TableHeaderColumn dataField="sim" width="160px" dataSort>SIM</TableHeaderColumn>
                    <TableHeaderColumn dataField="contractStartDate" width="180px" dataSort>Contract Start Date</TableHeaderColumn>
                    <TableHeaderColumn dataField="contractEndDate" width="180px" dataSort>Contract End Date</TableHeaderColumn>
                    <TableHeaderColumn dataField="deviceBalance" width="130px"  dataSort>Device Balance</TableHeaderColumn>
      </BootstrapTable>
      </CardBody>
                <Aside passedVal={this.state.selectedRows}/>
        </Card>
  </div>
);
}

}

And Aside.js is as follows :-

import React, {Component} from 'react'; class Aside extends Component {

constructor(props){
    super(props);
}

render() { return (

VALUE: [{this.props.passedVal}]

)

} }

export default Aside;

FYI : Both the alert statements in handleSelectSubscriber is printing correct data always.

Any help in resolving this would be appreciated.

[raghubedi2004]

FYI, When I pass any string value, like test="abc", it renders successfully. But not able to pass the object.

[raghubedi2004]

I was able to pass the state as

<Aside {...this.state} />

in DataTable.js