How to re-render child component in react spfx?

Question

I have a child component which consists of a form with input tags. I am rendering this component in the parent. I want to re-render the child component with new values while changing the drop-down value.

export interface INewFormProperties {
data:any[];
allNames:any[];
allData :any[];
selectedId:any;

 }
export default class NewForm extends React.Component<any, INewFormProperties> {
    constructor(props: any) {
      super(props);
      console.log(this.props.data);
      console.log(this.props.allNames);
      console.log(this.props.selectedId);

  }
 render() {
      return <div className="row">
       <div className="form-group col-md-4">
    <label>Name:<i><b>*</b></i></label>

<select className="form-control formControl" onChange= { () =>
                    this.props.simplifiedFunction()} id="ddlName" defaultValue={this.props.data[0].EmployeeID} >
{this.props.allNames}
</select>
</div> <div className="form-group col-md-4">
<label>Title:</label>
  <input className="form-control formControl" value={this.props.data[0].Title}  id="txtTitle"
   />
</div>
    <div className="form-group col-md-4">
    <label>Department:</label>
    <input className="form-control formControl" value={this.props.data[0].Department} id="txtDepartment" />
</div></div>
}

 }

In Parent Component: private renderUpdateItems():JSX.Element{

  var selectedId = this.state["selectedEOYID"];
    var data= {};
     if(this.state["isUPdate"]){
        alert("New Update...");
     }
    data = this.state["Items"].filter(item => item.ID == 25);
    return <div>
     <NewForm data={data} allNames={this.state["allNames"]} 
  simplifiedFunction = {this.updateFormDataNew} allData={this.state["Items"]} selectedId={this.state["selectedEOYID"]}></NewForm>

}

private updateFormDataNew(){
   var data = {};
   var selectedId = document.getElementById('ddlName')["value"];
   parentRef.setState({selectedEOYID:selectedId});
}

I am changing the state of parent component which I passed as a property in the child component but while changing the state child component should re-render?

score 1 · Accepted Answer · answered Apr 24 '19 at 10:48

Yes, child component should rerender if you change its props. Please check that state is changed and render function is called in your Parent Component when you set new state. I think you have a problem with parentRef. Here's how to fix it:

Don't overuse Refs. (click here to read React doc about refs )

Try to change

parentRef.setState({selectedEOYID:selectedId});

to

this.setState({selectedEOYID:selectedId});

Also, you can get the value of your select without using of document API: (click here to read more about forms in React and how to work with select)

You can change

onChange= { () => this.props.simplifiedFunction()}

to

onChange={this.props.simplifiedFunction}

and rewrite your updateFormDataNew function like that

private updateFormDataNew(event){
   var selectedId = event.target.value;
   this.setState({selectedEOYID:selectedId});
}

Please try to do this. If this will not help please provide constructor and render functions of Parent Component.

Thanks, Andrii. I have checked as per your suggestion. Render function is called in my Parent Component when the state is changed. And I am calling a parent method from a child that is why I used ParentRef. — Sandeep Arora, Apr 24 '19 at 12:46
do you fix your problem, or your child component still not updating? — Andrii Golubenko, Apr 24 '19 at 14:45
Yes, now a component is updating but still not in the way that I want it to be. I should raise other question for that. Thanks Andrii — Sandeep Arora, Apr 25 '19 at 07:41

How to re-render child component in react spfx?

1 Answers1