Set parent props to child component variable

Question

I am new in React and I would like to assign parent props to child component's variable like=>

this.setState({
   tsmodel : props.dataSource
})

Here is parent code =>

<TimeSheetDialog 
          fromdate={this.state.fromdate}
          todsate={this.state.todate}         
          show={this.state.showmodel}
          onHide={this.handleModelShow}
          dataSource={this.state.selectedtsrow}/>

I pass this selectedtsrow variable to the child component.

Here is my child code=>

export default class TimeSheetDialog extends React.Component{

    constructor(props){
        super(props);

        this.state = {
           tsmodel : props.dataSource
        };    
    }

 render(){
   return(
   .
   .
   .



     <DatePicker
         selected={ this.state.tsmodel.tsdate }
         onChange={(e)=>this.handleDateChange("tsdate",e)}
         dateFormat="dd-MM-yyyy"
         />

)

}
}

I can't use like that because this tsmodel is always undefined .

My requirement is I don't want to use this.props.dataSource.tsdate and I would like to use this.state.tsmodel.tsdate.

How can I set this parent props to the child variable? Am I miss logic?

I tried to print like that in constructor and componentwillMount but both undefined but inside render block it has data. — Loran, Oct 10 '19 at 06:52
inside the constructor print - props.dataSource. Is that undefined? Also share the output of console.log(this.state.tsmodel) — Monica Acha, Oct 10 '19 at 06:56
@MonicaAcha, Sry, inside the constructor, I got an empty object. Not undefined. — Loran, Oct 10 '19 at 06:59
Maybe the parent is sending an empty object. Please make sure you are updating your state in parent. Or share the relevant code of setting the state for us to debug — Monica Acha, Oct 10 '19 at 07:03
Your code should work, the problem is that `this.state.selectedtsrow` undefined — Dennis Vash, Oct 10 '19 at 07:03
@DennisVash, I call the setState before opening the child dialog and I used by callback function to make sure value is updated in `selectedtsrow`. — Loran, Oct 10 '19 at 07:10
Please make a producible example: [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example), you can use sandboxes like SO built-in snippets, codesandbox, codepen etc. — Dennis Vash, Oct 10 '19 at 07:11

Alister · Answer 1 · 2019-10-11T00:29:10.450

0

In my experience the best way to do this is to pass a function bound to the parent to the child, which changes what is necessary in the parent. So

parent {
    setValue = (value) => {
         this.parentValue = value;
    }

    render() {
         return(<child setParentValue={this.setValue}>);
    }
}

child() {
    someFunction = () => {
        this.props.setParentValue("value");
    }
}

As for changing props, only the parent of the parent (grandparent) would be able to change the props given to the parent, so perhaps basically a function down the line is best?

edited Oct 11 '19 at 00:29

answered Oct 10 '19 at 07:02

Alister

453
6
15

Normally I also use like that, but now I want to split code as much as possible between parent and child and I don't want to depend this value on parent function. – Loran Oct 10 '19 at 07:11

score 0 · Answer 2 · answered Oct 10 '19 at 08:19

This is because my child variable is not refreshed.So I used the componentWillReceiveProps method like=>

componentWillReceiveProps(nextProps) {
   this.setState({
      tsmodel : this.props.dataSource
})
}

Now tsmodel is updated.

if you don't want to use componentWillReceiveProps , use the key attribute in child like=>

<TimeSheetDialog 
          fromdate={this.state.fromdate}
          todsate={this.state.todate}         
          show={this.state.showmodel}
          onHide={this.handleModelShow}
          dataSource={this.state.selectedtsrow}
          key = {this.state.selectedtsrow.id}/>

If selectedtsrow is changed, this component will be re-rendered. more info here=> more info

Set parent props to child component variable

2 Answers2