CODEWITHSUNDEEP
reactjssharepointspfx
Sandeep Arora
Sandeep Arora

Reputation: 5

How to re-render child component in react spfx?

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?

Upvotes: 0

Views: 1279

Answers (1)

Andrii Golubenko
Andrii Golubenko

Reputation: 5179

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:

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

Try to change 

parentRef.setState({selectedEOYID:selectedId});

to

this.setState({selectedEOYID:selectedId});
  1. 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.

Upvotes: 1

Related Questions