ReactJS: Child Component is not updating even I am passing different values

Question

I am new to React.

My child component (SmithchartSeriesDirective) successfully displays the data passed from the server, when the parent component (SimplePanel) is loaded for the first time. On subsequent calls the data received from server changes, it is reflected in the props, but once I bind this data to the child component, it does not reflect the updated data in the component.

I am binding the data in listResult array.

Below is Parent Component SimplePanel

export class SimplePanel extends Component<Props> {

  render() {
    var reactance: number[] = [];
    var resistance: number[] = [];
     this.props.data.series.map((anObjectMapped, index) => {
       if(index==0)
       {
         reactance = anObjectMapped.fields[0].values.toArray();
       }
      else
      {
         resistance = anObjectMapped.fields[0].values.toArray();
      }
  });
   var resultArr = 
   {
    resistance:0,
    reactance:0
   };

   let listResult =[];
    for (let index = 0; index < resistance.length; index++) {
      var newObj = Object.create(resultArr);
      newObj.resistance = Number(resistance[index]);
      newObj.reactance=reactance[index];
      listResult.push(newObj);
    }
    return (<div className='control-pane' style={{  height:'100%', width:'100%', backgroundColor:'#161719' }} >
            <div className='col-md-12 control-section' style={{  height:'100%', width:'100%' }}>
                <SmithchartComponent  id='smith-chart' theme="MaterialDark" legendSettings={{ visible: true, shape: 'Circle' }}>
                    <Inject services={[SmithchartLegend, TooltipRender]}/>
                    <SmithchartSeriesCollectionDirective>
                        <SmithchartSeriesDirective 
                            points= {listResult}
                            enableAnimation={true}
                            tooltip={{ visible: true }}
                            marker={{ shape: 'Circle', visible: true, border: { width: 2 } }}

                        >
                        </SmithchartSeriesDirective>
                        </SmithchartSeriesCollectionDirective>
                </SmithchartComponent>
            </div>
    </div>);

Just console.log(listResult) after the for loop. could you show the child component details? — Palash Kanti Bachar

IVIosi IVIosi · Accepted Answer · 2020-02-03T11:11:26

welcome to stack overflow.

First remember that arrays saved by reference in JavaScript. So if you change any array by push() or pop() methods, reference to that array doesn't change and React can't distinguish any change in your array (to re-render your component).

let a = [2];
let b = a;
b.push(4);
a == b; //a is [2] and b is [2,4] but the result is true.

You can use this approach as a solution to this problem:

let listResult = [...oldListResult, newObj]; // ES6 spread operator

Also consider for rendering array elements you need to use key prop, so React can render your components properly. more info can be found here.

ReactJS: Child Component is not updating even I am passing different values

1 Answers